Video backgrounds no longer centre on mobiles

Support
#1

Since updating to the latest version of Pro theme the video we us on one of our web pages doesn’t centre. It does in the Cornerstone editor when emulating a mobile and also in the Google Chrome developer tools emulator but now on both Android and Apple devices the video content is focused on the top left corner.
When this glitch was discovered we were using the custom option in th advanced background settings of a section so we switched to using the video background option but the behaviour is still the same.
I am aware that the standard advice is to avoid video on mobiles but this has been working fine for my customer for the last 3 years.

I have also migrated from short code storage to html in an attempt to find the cause.

Please advise if this is a known issue and the best way to resolve this.

many thanks

Richard

#2

Hey Richard,

Thanks for writing in! We would be happy to double check your site if we can view and inspect the background video added to the page. You can create a secure note in your next reply with the following info:
– Link to your site or page having the issue

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

#3

Hi
I have added login details to 2 sites that are doing the same thing. One is a live site and one is a dev site with very little in i.e. only 4 plugins and no old or custom css . Interestingly the hotel site the video plays correctly in the cornerstone editor (showing the centre of the video) but on the dev site the video plays focused on the top left corner when viewing any of the breakpoint views other than large screen.

Thanks for any advice you can give

#4

Hi

I think, with playing around a bit i have solved the issue with this piece of CSS

.x-bg-layer-lower-video video {
    object-fit: cover;
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%!important;
}
1 Like
#5

Hey @The_Capture_Factory,

Good to know that you have figure out a way to resolve the issue. I will also inform our developers about this for them to investigate.

Cheers.