HTML5 Video loading but not playing on live site

Hi,

I’m trying to get an html5 embed video to play on my site, but it won’t play on the live site…only in the designer. Does anyone know why this might be?

Here’s the embed code I used:

<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: 100;">
  <source src="https://manus-webflow.s3.amazonaws.com/Manus+Flower+w+MBM.mp4" type="video/mp4" />
  <source src="https://manus-webflow.s3.amazonaws.com/Manus+Flower+w+MBM.webm" type="video/webm" />
</video>

It wouldn’t work when I changed the video urls to http:// either.

But the video will autoplay fine if I open it in a new tab in my browser. So it must be something going on in the webflow site.

Any ideas for a solution? Thanks in advance.


Here is my site Read-Only: How do I share this now? The Share button in the designer seems to be gone now…

Here’s the live site: https://manus-site-47b7bb.webflow.io/

I believe you have to add muted for autoplay to work. so it would look like <video muted autoplay loop style="width:100%...

Try that and let me know if it works.

1 Like

That worked! Thank you so much.

Hi Joe,

Do you know how I can make it work on mobile? Right now the videos take over the screen as I scroll. I’d like them to either play normally in the page or just turn static in mobile.

Thanks.

I’m not sure what you mean. Can you send a screenshot of how they look on mobile?

Sorry! I think I fixed it. I just switched between the html5 embed video to a webflow background video element on the mobile view.

Before, the video on mobile would pop out of the background as you scrolled and take over the screen until you dismissed it.

1 Like