Background Looping Video No Longer Working On Chrome

Is it just me or have you also been stumbling across website where background looping videos seem to be frozen or appearing with a black screen?  Maybe it is one of your own websites and you’re trying to diagnose the problem.  You’re not alone!

The issue stems back to a new release of Google Chrome which starting effecting auto video playback around June 2018.  According to the release notes by Google Chrome, it states:

In this newest browser release, Chrome “will stop the video from playing on any site where the video is set to autoplay with sound — and when it’s not the site’s primary purpose to run the video.”

This release seems to be in an effort to stop video ads from blaring out of peoples speakers when they load a new website and it makes sense.  However, it also seems to be effecting a lot of websites that use modern looping video backgrounds.  While most of these videos do not have sound by default, Google Chrome does not know that unless you specifically state it when embedding the video.

What’s the solution?  It’s easy!

Simply make sure ‘muted’ is added within the video tag.  Example:

<video id="bgvid" autoplay muted loop>
<source src="yourvideolink" type="video/mp4">
</video>

Notice the ‘muted’ added within the video tag.  This signifies to Google Chrome that even if the video does have sound, it will not play.  Therefore, Chrome will allow the video to auto-play on page load.

Now get out there and fix those looping videos!