Auto-playing background videos are hard, so let's make it easy

In theory, it's as simple as adding the autoplay keyword to your <video> tags, like:
<video autoplay src="https://swarmify.com/demo_video.mp4"></video>.

Unfortunately, there's one major catch. Videos that begin playing automatically have acquired a reputation of being annoying, intrusive, battery hogs on mobile phones. Because of this, browsers sometimes forbid videos to autoplay. Apple was the first to restrict them; first in iOS Safari, and later in desktop Safari. Recently, Chrome has followed suit.

You might be seeing this issue if you have ever gotten Unmuting failed and the element was paused instead because the user didn't interact with the document before. as an error message in your Chrome console.

Muting and looping

Luckily, for site owners who want background videos, one of the major exceptions to Apple's (and now Google's) policy is for muted videos. Adding the muted keyword to autoplaying videos makes them most compatible with these stricter policies. As of February 2018, Chrome will always autoplay muted videos, though Safari may still sometimes refuse. (Note that a silent video won't work, because browsers still see an audio track; be sure to use the muted keyword.)

Background videos usually look best when the video automatically restarts playback when the video finishes. To do this with a regular <video> tag, just include the loop keyword.

Inline for iOS

In Safari, videos become full-screen by default when played. While this might create a pleasant experience for users viewing regular video content, it renders background videos practically useless. To keep a background video where it belongs on a page, add the playsinline keyword to your video. This keyword also makes it more likely Safari will allow it to autoplay.

Here's a complete example:

<video autoplay muted loop playsinline src="https://swarmify.com/demo_video.mp4"></video>

YouTube

Now, this is fine for <video> tags, but what if you use embedded YouTube iframes? Unfortunately, YouTube doesn't support muted videos, which means there's no guarantee Safari or Chrome will let it autoplay. Even if it did auto-play, it's difficult to hide all the YouTube branding to get that clean background effect you want.

Fortunately, SmartVideo can help 👌