[Resolved] Video Hero on mobile

[Tom]

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?

[Ying]

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!

[Tom]

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.

[Ying]

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

[Tom]

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.

[Fernando]

Hi Tom,

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

[Tom]

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

[Ying]

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%;
}

[Tom]

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/

[Ying]

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.

[Tom]

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.

[Ying]

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

[Tom]

Thank you – i have flushed the cache.

[Ying]

I’m still seeing the same.

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

[Tom]

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

[Author]

Posts