[Resolved] Video Hero on mobile

Home Forums Support [Resolved] Video Hero on mobile

Home Forums Support Video Hero on mobile

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #2314752
    CorpCredible

    We use a video for our hero image on corpcredible.com and on mobile we have it set to a static image until the video loads. Once the video loads it starts playing at the the 1920 aspect ratio for a second and then snaps to the correct size – the result is that it flashes black bars on the top and bottom and then plays. Is there a way to prevent this?

    #2314823
    Ying
    Staff
    Customer Support

    Hi Tom,

    Can you disable your cache plugin to test?

    I think the flash is from the layout shift of your site header and the logo slider section, not the image or video section.

    Let me know!

    #2314839
    CorpCredible

    I disabled it and it still is happening – there is a funny thing that happens on desktop with the header – where it gets big before it loads, but that isn’t really bothering everyone. It is really just the instant when it swaps over from static image to video on a phone only. I left the cache disabled if you want to check it out. Thank you for your quick reply.

    #2314863
    Ying
    Staff
    Customer Support

    Ah, I see what you mean, it only shows on mobile devices.

    It’s extremely hard to debug on a mobile device.

    I checked the CSS, it looks all good.

    Can you try adding this line:
    object-fit: cover;

    to this CSS?

    .background-video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: .6;
    }
    #2314982
    CorpCredible

    I went ahead and added that css and I can’t tell if it is working – do you still see it. It is as though it is taking a second for the video to adjust to the screensize and as it loads it is fitting it in a 16 x 9 aspect ration before snapping to the zoomed view.

    #2315311
    Fernando
    Customer Support

    Hi Tom,

    Are you still seeing it from your end? I’m finding it hard to notice it from my end.

    #2316797
    CorpCredible

    Hi Fernando – The glitch occurs on phones only, right when it switches from a static image to the video. It is as though it is processing the screen width and thinks it is 16×9 for a second and then it starts. I would like a smoother transition without the bars at the top and bottom for the video to begin playing. I uploaded a screenshot.

    http://tomw126.sg-host.com/wp-content/uploads/2022/08/mobile-glitch.jpg

    #2316922
    Ying
    Staff
    Customer Support

    Hi Tom,

    I can still see it on my phone.

    Can you try this:

    1. Remove the poster from the HTML: poster="/wp-content/uploads/2022/06/video-loop-placeholder-10.jpg".

    2. Upload this image as the background image of the header element, choose center centeras the Background Position.

    3. Remove the CSS for video[poster], and change the .background-video CSS to this:

    .background-video {
        position: absolute;
        left:0;
        right:0;
        bottom:0;
        top:0;
        opacity: 1;
        height: 100%;
        object-fit: cover;
        width: 100%;
    }
    #2316951
    CorpCredible

    Thank you for taking another look – I went in and followed the instructions and it seemed to cause there to be a black screen while the placeholder loads, then the photo shows up and then it takes a while and the video plays. Also the video is now the wrong size – it is zoomed in too far and the header size is too tall – it is just not resizing for mobile. I went ahead and moved this instance to another url so that I wouldn’t have a broken site live. http://tomw126.sg-host.com/

    #2317039
    Ying
    Staff
    Customer Support

    Can you try the solution on your staging site so I can take a look?

    So far I’m still seeing the same settings as the production site.

    #2317963
    CorpCredible

    The edits have been made to here http://tomw126.sg-host.com/ – You can tell because there is no text over the slider any longer.

    #2317973
    Ying
    Staff
    Customer Support

    Can you make sure cache is cleared as I’m still seeing the poster and the old CSS?
    https://www.screencast.com/t/gukNewIKPEG

    #2320312
    CorpCredible

    Thank you – i have flushed the cache.

    #2320383
    Ying
    Staff
    Customer Support

    I’m still seeing the same.

    I would strongly recommend turning off any of the cache plugins on your staging site.

    #2320575
    CorpCredible

    OK – i finally got it to stick – it was due to insecure content. Let me know if you still can’t see it.

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