Embedded video stretching outside container on mobile

I’m building a portfolio with several embedded mp4 videos.

Here’s the custom code I’m using (it references a script that makes all of them lazy load, for performance):

<div
  class="w-background-video w-background-video-atom"
  data-autoplay="true"
  data-loop="true"
  data-wf-ignore="true"
 style="position: relative; width: 100%; padding-top: 56.25%; border-radius: 18px; overflow: hidden;"
>
  <video
    autoplay
    loop
    muted
    playsinline
    loading="lazy"
    style="object-fit: cover; width: auto; height: 100%; border-radius: 18px;"
  >
    <source
      type="video/mp4"
      src="https://streamable.com/l/rdftzu/mp4-high.mp4"
      data-wf-ignore="true"
    />
  </video>
</div>

It shows the video fine on large breakpoints, however on mobile, the video is cropped as if it were magnified 10x.

Is there a solve for the mobile breakpoint that doesn’t affect the other breakpoints?

ChatGPT suggested me adding this:

<style>
  .w-background-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: 18px;
    overflow: hidden;
  }

  .w-background-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Default for larger screens */
  }

  @media (max-width: 768px) {
    .w-background-video video {
      object-fit: contain; /* Adjust for mobile screens */
    }
  }
</style>

But the videos get completely crazy and out of frame as in this screenshot:

Read-only link bellow. Any suggestions?

Read-only

Tried changing the object fit to fill instead of cover, but it just goes out of frame

Hi,

If the video is still stretching, you can use CSS to force it to maintain a correct aspect ratio on mobile devices.

Select the video container or the parent element of the video.

In the Style Panel, give it a class (e.g., w-background-video-atom).

Add the following custom CSS to the Custom Code section of the page or in Project Settings under Custom Code > Head Code:

.w-background-video-atom{

position: relative;

width: 100%;

padding-top: 56.25%; /* This is for a 16:9 aspect ratio */

height: 0;

overflow: hidden;

}

.w-background-video-atom video{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Add Mobile-First Media Queries

Sometimes, adjusting the styling for mobile devices specifically using media queries is needed to prevent overflow. You can add this custom CSS to handle mobile devices better.

  • Steps:

Add the following code in your Custom Code section to make sure the video behaves correctly on mobile:

@media only screen and (max-width: 767px) {

.w-background-video-atom video {

max-width: 100%;

height: auto;

}

}

@Website_Speedy - thanks for taking a look!

So I followed these steps, added the class to one parent element to test, and unfortunately for some reason, it made every video in the entire site look misplaced within their respective containers, as you can see here: https://portfolio-2025-1be956.webflow.io/

Only the videos that I’ve uploaded the file itself as a background videos are working (and were already working before). The videos I add through custom code are the ones I’m having issues with.

Here’s my read-only link if it helps: Webflow - Portfolio 2025

I’m not sure why the container is not holding the video?

Update: tried @media only screen and (max-width: 767px) {

.w-background-video-atom video {

max-width: 100%;

height: auto;

}

}

And unfortunately, it bugs the entire site. Hopeless at this point and just accepting the fact that there’s no way to fix it? It may be due to the template that I’m used, there may be something there in the code that just doesn’t allow fixes?