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

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

Home Forums Support Page Hero Background Video – Odd behaviour on iPad

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2374996
    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?

    #2375161
    David
    Staff
    Customer Support

    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;
    }
    #2375364
    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?

    #2375432
    David
    Staff
    Customer Support

    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;
    }
    #2375456
    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

    #2375464
    David
    Staff
    Customer Support

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

    #2375469
    Andrew

    Yep.

    #2375536
    Ying
    Staff
    Customer Support
    #2375540
    Andrew

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

    #2375554
    Ying
    Staff
    Customer Support

    Can you try add this CSS as well?

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

    Seems to have done the trick, thanks!

    #2375638
    Ying
    Staff
    Customer Support

    You are welcome 🙂

    #2473973
    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

    #2474264
    Fernando
    Customer Support

    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.

    #2474290
    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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.