Embedded muted autoplay video?

Design help General
1

Hi there!

I’ve looked through forum posts but haven’t been able to find one that fits what I’m wanting to do. Basically, the behavior that’s very common (even on webflow’s homepage itself) where:

  1. an embedded video autoplays
  2. muted
  3. on a loop
  4. autoplays on all screen sizes (including mobile)
  5. hiding the player controls
  6. and is responsive

Both of my tests below are on this testing page to check out:
https://inline-video-autoplay-test.webflow.io

I’ve tried with Vimeo using this code (the top video above), but it still shows the player controls:

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/414052361?autoplay=1&loop=1&autopause=0&muted=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Then I tried pulling the code from Webflow’s homepage itself (the 2nd video from link above), and it just shows the jpg video poster and doesn’t start playing automatically (unless I right click and force it to play). I’m no code junkie so don’t know what other code is necessary to make it work. :confused: Here’s that code:
<video playsinline muted style="width: 100%; height: 100%; display: block; margin: 0px;" poster="https://assets-global.website-files.com/5d3e265ac89f6a3e64292efc/5d48c7028f3da11303aaebf1_lattice-poster.jpg"><source src="https://d3e54v103j8qbb.cloudfront.net/videos/lattice.mp4" type="video/mp4"></video>

Any help from you embedded video ninja heroes out there?

Thanks so much, y’all!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

The Vimeo player supports the option “background” default is false. Enable the player’s background mode which hides the controls, autoplays and loops the video (available to Plus, PRO, or Business members).

Working example… enjoy some Kali. I do.
https://vimeo-bg.webflow.io/

3

Yeah, I saw that but won’t be using it enough to justify paying for pro. Is there an alternate way?

4

Any other ideas dancing around out there? :grimacing: I know there must be ideas that don’t involve a paid vimeo account …

5

Just add the autoplay parameter to the video element. …

<video playsinline autoplay muted style="width: 100%; height: 100%; display: block; margin: 0px;" poster="https://assets-global.website-files.com/5d3e265ac89f6a3e64292efc/5d48c7028f3da11303aaebf1_lattice-poster.jpg"><source src="https://d3e54v103j8qbb.cloudfront.net/videos/lattice.mp4" type="video/mp4"></video>
6

Bingo. So simple, yet I didn’t know that was a parameter, so very helpful! Thanks so much!

It’s working as expected:
https://inline-video-autoplay-test.webflow.io/