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:
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.
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?