Autoplay Vimeo Video Not Working

Design help Custom code
1

I’m using the HTML embed to display videos from my vimeo account. They are supposed to autoplay as it’s in the code from vimeo but it doesn’t work. I have tried muting the video but that doesn’t help either. Here is an example of how it should function: Sharjah City Brand

Any help is much appreciated.

Here is my site Read-Only:

https://preview.webflow.com/preview/hermanawuku?utm_medium=preview_link&utm_source=designer&utm_content=hermanawuku&preview=d102799a507f540081ebe7c1f25913eb&pageId=6442563a3472136a18d62fb4&workflow=preview

Here is my site:
https://www.hermanawuku.com/oivi

2

@19Blue You’re missing Mute &muted=1 and probably playsinline to be safe.

So what you did but:

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

But if you’re using Vimeo and you want more control you could just build a <video> tag with the Webflow Custom Element, no embeds or iFrame issues, I did it here the other day with the CMS, but you don’t need to add that bit and add the urls directly.

3

Thank you @J8kes

This works occasionally. Sometimes one or a few of the videos autoplay but never all of them. It seems fairly random when they work or not. On some videos the “unmute” button still shows up on mobile as well.

Any idea what I can do to have it work 100% of the time in all browsers?

I’ll see if I can figure out the

I’m surprised Webflow doesn’t allow vimeo’s autoplay code to work.
Seems like a pretty simple thing to accommodate.

Thanks again for helping out.

4

@19Blue Yeah, strange Herman, but iframe’s lose a bit of control, have a look at the custom element <video> option I linked in my original post, or just use the embed code to try it out and see, you can do more than with a iframe, just update the style bit for what you want. With custom element approach in Webflow you can use the designer to style it (there’s a cloneable in the post):

<video 
  id="vimeo-video" 
  title="A descriptive title for accessibility" 
  style="width: 100%; height: auto; min-width: 100%; min-height: 100%; object-fit: cover; position: absolute; z-index: -1;"
  autoplay 
  loop 
  muted
  playsinline>
  <source src="url-1" type="video/mp4">
  <source src="url-2" type="video/mp4">
  <source src="url-3" type="video/mp4">
  Your browser does not support the video tag.
</video>
5

Thank you! Will try.