Video Background not playing

Community resources General
1

Hello,
I’ve added background videos on the website but it only plays on the mobile version (and not on desktop)
The videos play when you press “toggle preview” but it doesn’t seem to work on the Published website.

https://preview.webflow.com/preview/iprfilms?utm_medium=preview_link&utm_source=dashboard&utm_content=iprfilms&preview=64cb974afd91eefb83ee4c30ea3739d8&workflow=preview

Here’s my published version

2

Hey @Israel_Reyes, welcome to the Webflow community. First off, what a great looking website!

The video plays fine on Desktop on my end. I have looked at the published website on the current versions of Chrome, Brave and Firefox. Have you tried opening the website in a private window or in another browser?

3

Thank you! I got it from a template :slight_smile:
It might be just me then. I’m using chrome, went on incognito, tried Bing, but it still doesn’t play.

4

@Israel_Reyes have a look at the following thread.

1 Like
5

Yep that fixed it for me. That would mean everyone would have to update their display settings then?

6

@Israel_Reyes that’s great to hear.

Well, I guess so. A solution involving a little bit of custom code could be using the media query prefers-reduced-motion. If a user has this setting enabled, show a dedicated Play video button. If disabled, hide the button and play the background video automatically.

7

I had the same issue and discovered it was hiding behind all the elements. If you set the Background Video element to relative and add 100/1000 Z-index to it and it will show.

4 Likes
8

This worked for me. Had the same problem, the background video was not displaying. Tried to set width and height but didn’t work. Realised that its position is relative and the “Z index” might be the problem. Yes it was. Just set the index higher and should be good

9

This worked, I’ve spent almost 1-hour trying to fix it.
Thanks for posting Jason