How can I center a looped video on a homepage and ensure mobile compatibility?

Can someone please help.

I have applied this code to my homepage to show a looped video.

<video width=“100%“video loop=”” muted=“” autoplay=“autoplay” preload=“” id=“vid”>

It doesn’t play on the mobile and is there a way to centre it?

Can you send here your website homepage link?

It’s www.chantallaurahandley.com I’ve had to make it 100% so it’s not sitting off to the right for now.

I don’t see any issues on mobile as it plays on my end as well. (android and iOs)

That’s good. Not playing on my mobile for some reason. If I wanted to make it smaller, what would be the code to centre it?

Any more help with centering the video would be wonderful! :slightly_smiling_face:

What do you mean smaller? The video is already centered as it is now at 100%. If you wanted to make it smaller on larger screens, you can place “text-align: center;” on it in this class (see image).

NateX_0-1666794340563.png

Thank you!

Great! Let me know if this works and kindly mark it as "solved" please. Thank you!

I have trouble with the video now not playing in mobile view? I’ve tried on a few devices. It’s not playing on any of them!

Can you send a video here showing it’s not playing?

https://drive.google.com/file/d/17t2vz6pbckgXYsgLpx3P9AohjKk5yEac/view?usp=sharing

I’m not sure how to do that. It doesn’t play on my mobile. It is just showing a static image. On the desktop it works fine.

check the link I sent here. Video is playing on android.

The issue is on your phone.

Well that’s super annoying… I wonder why!!? Ok I’ll check some other phones and see whats happening. Maybe it’s an apple thing!!?

Yes, confirmed. The issue is on iPhones. I tried it on my friend’s iPhone 13 and it’s not working too.

Here’s what I found out on this issue:

If you’re talking about auto-play not happening, that’s normal behavior. Some devices / browser restrict auto play for a couple reasons:

  • For people that don’t have unlimited data, auto playing videos loads huge files that eat up their data, so preventing that prevents them from losing data in their plan

  • Auto play is annoying to many people

Ok thank you.