Video Hero on mobile

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!

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.

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

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.

Hi Tom,

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

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 16x9 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

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

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/

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.

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.

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

Thank you - i have flushed the cache.

I'm still seeing the same.

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

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