Center background video on desktop and mobile

[Marco]

Hi there,

I have a background video in a section. It’s working on desktop and mobile however the video is not centred.
Is there a solution for fixing this?

In order to get it autoplay on mobile (IOS) I use this script in the header:

<script defer="defer"> jQuery(window).load(function(){ jQuery('.x-bg video').attr('playsinline',''); }); </script>

Is this correct or is there a better solution?

Thx in advanced!

[prakash_s]

Hey Marco,

Thanks for writing to us.

It’s not possible. Background videos are really disabled on mobile. There are hacky ways to make that possible but that would mean slowing down your page and it’s outside the scope of our theme support as it would require custom development.

The only way to play the video on mobile in our theme is to use the Video Element. It won’t be a background though.

Thanks for understanding

[Marco]

Hi, thx for your reply.

I have it working, I just need to have it centred. Is that possible?

[christian]

Hey @Marco,

It is not possible to reposition the background video without custom development. You’d need to consult with a developer to code the change of the background video position.

Thank you for understanding.

[Marco]

Hi Christian,

I have it working.

This is the css code for centering the video:

Class ID: x-video.bg

.x-video.bg { top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%,-50%) !important; -ms-transform: translate(-50%,-50%) !important; transform: translate(-50%,-50%) !important; }

And this is the header-script for autoplaying the background video on IOS (not sure if it works on Android).

<script defer="defer"> jQuery(window).load(function(){ jQuery('.x-bg video').attr('playsinline',''); }); </script>

And FYI:
Google and Apple changed there policy. It is possible to autoplay a background video on mobile as long as it is muted or has no audio

[tristup]

Hi @Marco

It’s great that you are able to resolve this issue. And thanks for your information related to Google and Apple policy change.

Thanks

[Marco]

Hi,
Your welcome and if anyone else needs this, they can use it

[tristup]

Sure, It helps.