Thoughts & Things

How to fix background videos that won't autoplay

March 14, 2020

Yesterday I was attempting to add a silent autoplaying video to an element and kept running into issues where the video would sit on the first frame and wouldn’t actually play the video.

As far as I could tell, I was doing everything correctly.

// Doesn't work
<video poster="image.jpg" autoplay playsinline loop>
  <source src="video.mp4" type="video/mp4">
</video>

All seemed correct, but why wasn’t it playing when I loaded the page?

Turns out if the video element itself isn’t muted, the video will not autoplay in most browsers.

// Works!
<video poster="image.jpg" autoplay playsinline loop muted>
  <source src="video.mp4" type="video/mp4">
</video>

Problem solved!

This definitely doesn’t mean that it will actually solve all of the problems, but in this case the result was exactly what I was looking for.


Cory Miller. Front-End Developer at ConvertKit. Remote.
PodcastTwitter