Website Video Backgrounds (and Drone Fun)

This video was taken at Thirsty Rock on the Pacific Coast of Costa Rica, a short 3-mile hike from where I live. By no means is this a professional production as it was my brother, Kai Larrabee, and myself playing with a new drone and then my amateur editing skills that made this possible.

About Web (HTML5) Background Videos

If you check out my full page bio you will see a video in the page header. This effect is often requested from our clients and is referred to as an HTML 5 Background Video.

A background video is a great way to add a “dynamic” or eye-catching effect to a webpage without taking away from the general content of the page.

A place to highlight a product, brand, or (as in our case) a person. We can easily layer text and images on top of these videos making them particularly great for use in page headers.

Web Video Rules

There are a few rules to using such videos. Background videos CAN autoplay on page load, which is a great effect but they CAN NOT contain audio and autoplay. In other words, if the video contains audio, then it must be muted to autoplay. Video with audio that is not muted will simply not start upon page load. This is not the rule of the developer but the “rules” set by all major browsers.

It used to be that we could autostart videos with audio but the major browser companies made the determination that it was disruptive to an unsuspecting user to suddenly have the sound playing. Of course, it was the advertisers that abused this and I have to say the rule is very reasonable.

So, if there is to be audio as part of the video, then we cannot autoplay but instead must design the header with a play button and rely on the site visitor to interact with the video if they so choose. We simply cannot force a video to autoplay if it has audio.