How To Create a Seamless Looping HTML5 Background Video – Tutorial

Written by activator_admin_91s8 while listening to Atmosphere - God Loves Ugly at some point on October 5th.

To create an HTML5 background video that loops in the background of webpage is pretty easy, however, there are a great amount of variables to think about. Some things to think about are: The file size of the video, what to export so it plays in all browsers, mobile options, etc...

To create an HTML5 background video that loops in the background of webpage is pretty easy, however, there are a great amount of variables to think about. Some things to think about are: The file size of the video, what to export so it plays in all browsers, mobile options, etc…

We usually utilize After Effects to chop the size down to less than 10 seconds and then use HandBrake to make the file size smaller. Here is a tutorial on how we made a video export for one of our clients, Hydrocomp. You can see the video on their website here:

For the video on Hydrocomp’s website, we found a great video on VideoHive.net that the client loved. The downloaded video was 1GB+ and 1 minute long. This is way to big to put as is, so we needed to cut it down. Here are the steps we took in After Effects to accomplish this:

After Effects

Start off by importing the video into Project.

In the Project List, drag the video on to the new comp window

Go to the middle and split the track (CMD+SHIFT+D). This will give you two layers.

Now move the top layer to the front (Look at the option panel to make sure it is set to 00:00:00). Then move the bottom layer over to the right so there is still some overlap.

Create two keyframeson the top layer. The first keyframe should be 100% and the second should be 0%. This will create a transition between the middle points. Sometimes you might have to play around with this to get it to look good as some scenes move slightly. This is what you should have:

Now all you have to do is Export the Video via Add To Render Queue. The default export is fine, since we will be using HandBrake to compress it further.

HandBrake

Now open HandBrake version 1.0+. Open Source as the file you exported from After Effects. Choose Fast 1080p30 from the presets.  Choose a destination and click Start

Cloud Convert

We also use Cloud Convert to create the other formats.

  1. Go to cloud convert and create an mp4, webm, ogv, preview image

https://cloudconvert.com/mp4-to-anything

Settings:

Web M | Quality set to 24 | VP8 | No Audio Track Final Size: 7.3 MB

Mp4 I No Audio Track

Another Option for Exporting a Preview Frame is Via After Effects

Open the original trimmed video into After Effects, Create a new comp with it and export the first frame (Composition > Save Frame As) It exports out as a PSD, open Photoshop and export that out as a JPG Medium Quality