Vimeo Fullscreen Background Not Autoplaying

Question

I'm reusing a very basic HTML & CSS code sample from Codepen, but as soon as I replace the video ID number from Vimeo with the one that comes with the code sample it doesn't autoplay. Nothing else is different in the CSS or HTML. Nothing else changed so I have no idea why my video I've uploaded doesn't autoplay upon loading the page.

Any Ideas?

Original Code:

      <section class="home-section home-full-height bg-dark-30" id="home" data-background="assets/images/section-5.jpg">
<div class="vimeo-wrapper">
   <iframe src="https://player.vimeo.com/video/76979871?background=1&autoplay=1&loop=1&byline=0&title=0"
           frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
      </section>

My updated HTML with different video ID number:

      <section class="home-section home-full-height bg-dark-30" id="home" data-background="assets/images/section-5.jpg">
<div class="vimeo-wrapper">
   <iframe src="https://player.vimeo.com/video/297135145?background=1&autoplay=1&loop=1&byline=0&title=0"
           frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
      </section>

Link to the actual URLs that are being called:

https://player.vimeo.com/video/297135145

https://player.vimeo.com/video/76979871

Codepen Link: https://codepen.io/abennington/pen/ZONqqv

Two Different URLs on my site to show that one is working and the other is not:

Working: http://knpdesign.co/vimeoworking.html Not: http://knpdesign.co/

Rebecca Sich Rebecca Sich · Accepted Answer · 2018-10-25T17:31:57

I am actually not quite sure why that video is working and yours is not. I will look into it further with our team. However, here is a codepen with your video working https://codepen.io/anon/pen/MPZVep. The one thing I added was the ?muted=1 parameter. There are a lot of rules surrounding autoplay and sometimes explicitly adding the muted parameter solves them. Good luck.

Vimeo Fullscreen Background Not Autoplaying

1 Answers