Make video background responsive on mobile

As far as i know the advanced slider can do that for you.
see here a demo: https://webers-testseite.de/weber/
But this is a selfhosted small video, and only the newest browsers for mobile devices ( IOS11 with new Safari f.e.) will play that background video.

On vimeo case : on sharing options you can see the embed options and press settings.
choose responsive and get rid of Author, Image and Title. Choose Autoplay and loop but no textlink !

the code of your video will be:
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/258140746?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Very important now we change in that code something
1) That div will not work – and we do not need it – same thing with the script
2) Change positioning to relative !!!
3) width: 100vw and height: 56.25vw (on 16/9 videos)
4) give the iframe a class: vimeo (on vimeo it seems to be good to scale the iframe a bit to have no borders on full-width at very small screens)
Result:
<iframe class="vimeo" src="https://player.vimeo.com/video/258140746?loop=1&title=0&byline=0&portrait=0" style="position:relative;top:0;left:0;width:100vw;height:56.25vw;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0"></iframe>

goto Advanced Layerslider make a new slider (responsive with width and height in the aspect ratio of 16/9)
add a video audio layer insert that code above and define that layer as background-video layer.

see result here: https://webers-testseite.de/weber/archie/

do this to quick css:

iframe.vimeo {
    transform: scale(1.02);
}

PPS: i have choosen the way over selfhosted video as background – because of GDPR ( DSGVO) reasons.
all big video hosters (youtube and vimeo) will send data from the visitors to their servers ( on minimum the IP) this is not allowes without an opt-in.

Hi
I needed this same thing and after reading all the threads on this topic, went through the steps above in the advanced slider, but still cannot see the video on my mobile – even though I can see the video on your site just fine. Vimeo has a new parameter using “background=1” to disable all the controls and autoplay/loop the video to get around the restrictions of the browsers, which have changed a bit since this thread.

My embed code is:
<iframe class="vimeo" src="https://player.vimeo.com/video/168191481?background=1&muted=1" style="position:relative;top:0;left:0;width:100vw;height:56.25vw;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0"></iframe>

Both sites look fine for me in the chrome inspector for mobile.
any suggestions?

• This reply was modified 5 years, 10 months ago by Munford.

HI thanks for responding!
I was able to get it working with that code, just a delay to see it on my phone.
the background=1 seems to do the trick.

If I wanted a but more height on the mobile video, how can I do that?
Nancy

i would like to help you.
But i guess this will only work with a third party plugin.: Advanced WordPress Backgrounds

see here a page in testing mode with youtube background video: https://webers-testseite.de/carinda/

Look with your devices to it and tell me if all works as you like to have it.
Afterwards i will give you support on that

All big Themes with drag and drop helper Tools have this problem. I looked for a Divi Solution for a customer and found a tut with that littel plugin above.
The trouble was to adapt it to the enfold-theme.
The Problem with video is that even if you have LTE Support on your mobile device – the RAM and ROM on Mobile Phones is limited.
On my webdesign homepage that is only a self-hosted very small Video. This will work propper. And then layerslider is a good solution because it is hard to get it responsive – even for mobiles too.

does that plugin work with the classic editor in enfold? I am not using gutenburg.
and if I understand you, the advanced layer slider can’t really be adapted to mobile in the same way as I need it?

in regards to GDPR – is it enough to have a compliance checkbox on the page where I have the background video?
I don’t see anything on visuello.no site. That site is built in Craft CMS, which I am not familiar with.

thanks
Nancy

Thanks for all the information. I will talk to my client about it. You wrote in an earlier post that you couldn’t use self-hosted videos for the mobile video background, right?

I tested making a slider in ALS with a responsive canvas size more 1:2 instead of 16:9 (that is, a vertical format) and then just using that for the mobile. Seems to work, unless I am missing something? It does load a bit slowly for me but not sure if that’s due to the sliders or something on my end.

QUESTION: is it possible to have the background video start playing at a random point every time a visitor views the page?

thanks for your help
Nancy

• This reply was modified 5 years, 10 months ago by Munford.