Video Background Not Showing Up On Mobile Browsers

[sonikmag]

Hello there! I am trying to override the default setting which prevents video backgrounds from appearing on mobile browsers.
I’ve went through a few forum posts already, and I haven’t found a solution for how to override this setting (although I do understand the sentiment concerning data usage). The thing I find confusing is that gifs can be used…but aren’t those typically denser in size compared to mp4 files?

I’ve used an alternative theme in the past and mobile video backgrounds show up with no issue and load optimally, but Pro Theme is substantially better in terms of editing websites - I just REALLY want this video to show up on mobile.

Any help is appreciated! Cheers

[sonikmag]

I did try adding this script based on another forum post:

(function($){ 
  $('#video-bg video').attr('playsinline','');
})(jQuery);

However that did not work either

[marc_a]

Hi @sonikmag,

Thanks for reaching out!

I suggest that you follow the recommendation given by my colleague on the other thread.

Self Hosted Video Background doesn't work when squirrly plugin is activated

Hi Alex, Yes, I can replicate the issue, but it seems this is not an issue with the player, but with the video itself, the video size is 118MB, and it’s not web-optimized. I tried it with a sample video and it works, please optimize your video in both .mp4 (H264) and .webm format. You can put two video URL on the Video Source field separated by vertical bar | character to cater to a wide range of browsers. Let us know how it goes, Cheers!

Hope that helps and let us know how it goes.