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:
- an embedded video autoplays
- on a loop
- autoplays on all screen sizes (including mobile)
- hiding the player controls
- and is responsive
Both of my tests below are on this testing page to check out:
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. 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!