Video Background for mobile devices

Hello, i have created a site with a video background. Everything works, just when i load the site on a mobile device its scaled way too big so i can only see a quarter of the video. The rest is not in the site.

Can anyone help me?

Thank you!

Here is my site Read-Only:

Hello @Simon_21,

In order to help you we need your read only site link not the published site link. There is a way to share your read only site on the designer.

Sure, here it is:

But in the read only mode the video doesn’t even play. On the published site the video plays, also mobile, but is too big scaled.

Hello @Simon_21,

So you have your background video size set to 100 vw and 200 px right? I would change that px value to something else, maybe % or vh but you will have the experiment with the right sizes for mobile until you have the desire result. I hope this puts you on the right track.

Try this custom code:

   .w-background-video > video {
       width: 100%;

> “Child Selector” - Selects all <video> elements where the parent is a <div class="w-background-video"> element


YEEES! That worked, thank you very much!

1 Like

Great :slight_smile:

Mark as solution to close this topic. Thanks!