[Resolved] Page Hero Background Video – Odd behaviour on iPad

[Andrew]

I used this guide and it works fine on desktop and mobile: https://docs.generatepress.com/article/page-hero-background-video/

But on iPad (Chrome and Safari) the background image loads “normal” size first (16:9 in the middle of the screen) and then changed to fullscreen. It’s quite jarring!

Is there something I’m missing for ipad to stop this from happening?

[David]

Hi there,

not sure on this, try changing this CSS:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.9;
}

to:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.9;
    min-height: 100%;
    min-width: 100%;
    height: auto !important;
    width: auto !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andrew]

Thanks. It now loads fullscreen on desktop and mobile as normal but on iPad it loads fullscreen but too much – It’s like it’s just showing the left 50% of the video. Although it does load straight in and not small and then resizing!

EDIT: This is on both Chrome and Safari.

EDIT EDIT: Landscape it’s not too bad – It’s only cutting off some of the right. Obviously some needs to be cut off regardless of orientation on iPad but how can I align it centrally?

[David]

Ok, so what if we try this:

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    opacity: 0.9;
    min-height: 100%;
    min-width: 100%;
    height: auto !important;
    width: auto !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andrew]

So close 🤣

It’s basically fine now except there is a black bar along the bottom on iPad and mobile?

And on deskop the opacity doesn’t seem to cover the whole video? https://imgur.com/a/E3na5mI

[David]

Oh my lol
Is that on the home page of the site ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andrew]

Yep.

[Ying]

Can you try adding line max-height: 100vh; to this CSS https://generatepress.com/forums/topic/page-hero-background-video-odd-behaviour-on-ipad/#post-2375432 ?

[Andrew]

That fixed the opacity issue on desktop but the black bar at the bottom still remains on mobile and iPad unfortunately!

[Ying]

Can you try add this CSS as well?

.page-hero {
    overflow: hidden;
    position: relative;
}

[Andrew]

Seems to have done the trick, thanks!

[Ying]

You are welcome 🙂

[Ragunaath]

Hi I’ve followed the documentation and the css code given in this thread for background video, what I want to achieve is full page filled with background video and headline / buttons on top of it.

The issues is

1. The Background overlay doesn’t cover the entire background of video

2.white space is in the bottom more pronounced in tablet and mobile

3. the page scrolls horizontally all in desktop, tablet and mobile, and the overlay doesn’t extend to the right of that horizonal part of background video.

I want the page to be filled with background video, overlay and content on top of it

Attaching the desktop version of screenshot, marked yellow box shows difference in overlay and blue box shows the white space in bottom https://prnt.sc/MuRvkhnNBNvF

[Fernando]

Hi Ragunaath,

You can use this method instead that implements Background Videos through a Block Element: https://docs.generatepress.com/article/background-video/

With this, you can set a min-height of 100vh for the Container Block. This should force it to 100% height. Reference: https://docs.generateblocks.com/article/container-overview/#minimum-height

This should resolve the issues you’re having.

[Ragunaath]

I tried two changes, earlier I set min height 100vh in additional css, where the bottom padding to block container was 200px, after your reply

I deleted the min-width in additional css area, and used that in block container as given in documentation link, with that and even after reomving padding, it, it shows the black spaces on top and bottom, because that’s the background color of the container block, which serves for the overlay opacity.

then again I removed 100vh min width in the block container and added in Additional css, now it fills, after removing padding, but still you can see the overlay not fills up and the horizontal scrolling, wondering if it has anything to do with the background video size / resolution. I’m attaching the loom screen recording, check it

https://www.loom.com/share/4f5156267ad84c61af331b2ebcb80d35

[Author]

Posts