Recently I had a simple request from a client of ours – to use an embedded video as a design element in the header area of a page. It sounds simple, but it turned out to be tricky. Here are some of the options I found out during my experiments.
There were few requirements from the client:
The video must autoplay and loop smoothly.
The playback interface should be hidden since it's a design element, not an element of the page contents.
It should be easy for the site admins to upload new videos with high-quality and different duration.
At first I've reviewed the possibility of storing the video files on the client's server and playing them directly, but this idea was quickly ruled out for one main reason – the smooth playback can't be guaranteed in a way a video streaming service can. There are many custom video streaming solutions available at different cost, but in this article I'll compare the quick and free options offered by the two major video content services – YouTube and Vimeo.
Option 1: Using a self-hosted mp4/webp video
Like I mentioned earlier, using a self-hosted solution for the videos was my first idea, because of the straightforward embedding via a simple HTML5 tag, the clean interface and full control over the playback options. These advantages however were not enough to outweigh the biggest drawback – we can't guarantee a smooth playback, especially for longer videos, which cause greater server loads and there isn't a sophisticated buffering like the one offered by a video streaming service. A locally stored video file can be used if you have a couple of pre-selected short clips for background effects for example, but since the client will need a variety of longer clips and intros, which will be updated regularly, this won't be a viable option for them.
Nevertheless, here is what you get when placing an HTML5 video tag. You can remove the playback controls by omitting the “controls” attribute of the video tag. We will need the autoplay and loop attributes for our header video. There's an important note though. In order to ensure that the autoplay will work properly, you must add the “muted” attribute to the tag, otherwise the user's browser will pause the video due to the audio in it.
<video muted autoplay loop>
<source src="short-intro.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Option 2: Embedding a YouTube video
Using a popular video streaming platform was the way to go. First I started testing YouTube and it's embedded video features. Unfortunately I was quickly disappointed by the poorly documented parameters. For example I've set “autoplay=1”, but nothing happened. Of course the issue was the audio again which causes the browser to disable the autoplay. After some googling I found the mute parameter I needed, which wasn't mentioned in the docs: “mute=1”. The autoplay issue was solved, but I've stumbled upon a few deprecated parameters, which no longer hide interface elements such as video title and the list of suggested videos in the end. The last straw was the jagged looping and the required “hack” to make it work. You must add “playlist=” parameter with the same URL as the main video in order to enable the loop and it still isn't seamless (see the video below).
After the disappointment with YouTube I turned to Vimeo. I was pleasantly surprised by their simple and useful documentation. I was able to set the parameters I need right away. They've even mentioned the required “muted” parameter for the autoplay. Their interface is a lot cleaner and the looping is excellent. My only issue was that I can't hide the controls completely. The parameter “controls=0” seems to work only for paid plans.
My choice was option 3, even though I wasn't able to hide the interface completely in the free plan, it was still the cleanest and smoothest option of the mentioned above.
