10 Tips for Better HTML5 Video Banners

Video is a powerful tool.  Used well, it can draw attention, set a mood, or explain a topic.  Video banners are especially good at those first 2 points.

A good video banner requires more than just slapping a <video> tag on a page and calling it good.

In this article we’re going to explain everything you need to know to make great HTML5 Video banners.

What we’ll cover:

• Compressing videos (so they load super fast)
• What types of videos work best for banners
• Best HTML Code for adding the video
• Auto-playing videos on mobile devices
• Looping parts of a video with JavaScript
• blending two videos together in JavaScript
• Bonus: Adding Video Key frames with Handbrake.

Tip #1: Keep Files Small As Possible

Large video files are the enemy.

When making a video banner, don’t upload a 50 Megabyte file!  In fact, don’t even upload a 5 MegaByte file.

Why?

In a word… Slowdowns.  When you self host a video, every person that comes to your website has to download the file.  Hosting large video files on your website can slow down the entire website across the board.

What if I host it on an external server?

You can potentially host your video on a service like Cloudinary or other media hosting services, but even then, keeping the file small will insure people will see it in a timely manner.

Keep your videos tiny or many visitors will just see a black box…

How Small Should It Be?

Whenever possible, try to keep your video under 1 Megabyte.  If you can’t keep it under 1MB at least shoot for less than 2MB.

Does It Really Need To Be That Small?

I can hear some of you saying “It’s 2021. Everybody has broadband now and my 30MB file loads instantly for me.”

This is a classic rookie mistake.

Novice developers will see their video load instantly on their own computer and assume everything’s right as rain.

But this is an illusion. 

The reality is the video has been cached on your computer, so it appears to load instantly.  But that 30MB file will take 10-45 seconds for first-time visitors on an average broadband connection.

By then, most of your visitors will have already scrolled down the page, or clicked away, never noticing your amazing video.

Okay, Fair… but how can I make my video 1MB without it looking terrible?

Tip #2: Use “HandBrake” for Compression

HandBrake is a free video compression program and it’s amazing.

The example video at the top of this page is 334kb and still looks good. 

Typical videos exported from Adobe Premiere (or other video editing software) look awful if you try to compress them too small.  Generally these programs export videos ranging from 10MB to 10,000MB.   This is fine when you want to upload to YouTube, or use it for broadcast.  But it’s not going to work for self-hosted web banners.

First Step…

Export your video from Adobe Premiere (or whatever program you use to edit videos) at a nice high-quality.  Don’t try to compress it.  It’s okay if the initial file is large (in fact, the less compression your original video has, the better the results will be when you run it through Handbrake).

Second Step…

Download HandBrake (for free) and install it.

Third Step…

Open Your Video in Handbrake.  Click the Video Tab. Adjust the Quality to somewhere between 22 and 30.  Then press “Start Encode”.

Fourth Step…

Check your exported video.  How big is it? Is the quality acceptable?   

You may have to export the video several times before you find the best balance between quality and file size. 

If your video doesn’t play smoothly, check the “Fast Decode” checkbox.  This may make the video slightly bigger, but it will play smoothly on lower-end machines.

Still struggling to get the video small enough?  Here’s a few tricks to get the most from your video compression

Tip #3: Choose Videos with Subtle Movement

Videos with subtle movements compress much better than videos where everything is constantly changing.

Note: If you don’t see any movement, refresh your browser.

One Video in Viewport Rule (a Poem):

Upon a webpage
with two videos stacked,
the first one will play
but the other one’s wacked.
For there is a rule
that I recently have found
that apparently all smartphone-type
browsers are bound.
One video on-screen 
can play at a time
which is why I’ve resorted
to writing this rhyme.
I wrote this short poem
to fill-up some space
So each separate video
may play in its place.

When I originally wrote this article, I had two videos stacked so you could compare them, but when I tested it on a smartphone the second one didn’t play.  I eventually figured out that smartphones only allow one video to play on screen at time.

Okay, back to the topic…

Videos with Lots of Motion Don’t Compress As Well As Subtle Movement

That doesn’t mean you can’t use videos with lots of motion, but be aware that the file will have to be larger in order to retain decent quality.

Choose your videos wisely.  You want your above-the-fold videos to load as quickly as possible, and videos with subtle movements will do that better.

Tip #4: Stay Around 8-16 Seconds Long

In general, keep your videos around 8-16 seconds long.

You won’t be able to compress a 2-minute video down below 1 or 2 MB (and still look good).

Every video is a little different, but 8-16 seconds tends to be the sweet spot.  The loops aren’t so short as to be annoying, but still short enough for effective compression.

Tip #5:  Place on Colored Overlay on top of the video

Ever notice that many videos will have a transparent overlay on top of them?

This overlay actually serves two purposes…

1.  It darkens the video so you can put text on top of it and retain good contrast.
2. It lets you compress the video even smaller.

The above video is only 300KB.  Part of why that’s possible is because the overlay decreases the color contrast, which allows the compression software to work more efficiently.

Tip #6: Decrease the Video Resolution

You can only crank up the compression so far, before it starts to look terrible.

Don’t just mess with the quality slider. Adjust the resolution too.

This is especially effective when the video is being used as a background, because it give the video a slightly blurry quality without a lot of distracting compression artifacts.

Click on the Dimensions tab. 

Check the box that says “Keep Aspect Ratio”.  If you don’t see “Keep Aspect Ratio” change the Anamorphic dropdown to “Loose” or “None”.  The Handbrake documentation recommends Loose.

Then shrink the width to something like 600 or 800 wide.  As long as you don’t need a super sharp image, I’ve found that reducing the size will take you further than cranking up the compression. 

Ultimately, you have to try different settings until you find the best balance for your specific video.

Trick #7: Simple HTML5 <Video> Code

Once you’ve made your video, you need to place it on the webpage.

To keep things easy, I’ve prepared some simple code to add an HTML5 Video to your webpage.

Simple Looping HTML5 Video

Let’s say you want to have a simple video that automatically plays and loops (like the example above).

<video autoplay loop muted controls width="100%" height="auto"
src="https://www.launch2success.com/wp-content/uploads/2020/07/Girl-Opening-Tent.m4v"></video>

You can copy the above code and simply change the URL (in orange) to include your own video file.

Remove the Controls

If you don’t want playback controls, delete the word “controls” (highlighted above in green) from the above code.

This gives the video a feeling similar to an animated gif, and is ideal for video banners or animations.

Add a “Poster” To Make a Preview of Your Video

Even with a well compressed video, it may still take a few seconds to load (especially on slower connections).

Adding a poster attribute to your code, will give people something to look at while your video loads, so they don’t have to look at a black box.

<video autoplay loop muted controls width="100%" height="auto" 
src="https://www.launch2success.com/wp-content/uploads/2020/07/Girl-Opening-Tent.m4v"
poster="https://www.rexburgcamprentals.com/wp-content/uploads/2018/06/low-res-banner.jpg"
></video>

But make sure your poster image isn’t too big.  Otherwise you’ll just slow things down even more.  If possible, try to keep it under 30kb.

Tip #8 Looping Part of a Video JavaScript

Seeing the girl open the tent over and over, can start to feel old.  Let’s have her open it just once by removing the word “loop” from the code.

But then we lose all motion after the first play-through.  Let’s keep the movement going by adding some java-script trickery.

Loop the last 5 seconds of the video

Instead of looping the entire video, let’s just loop the last 5 seconds.

This can be accomplished with the following code:

<video autoplay playsinline muted controls width="100%" height="auto" src="https://www.launch2success.com/wp-content/uploads/2020/07/Girl-Opening-Tent.m4v" poster="https://www.rexburgcamprentals.com/wp-content/uploads/2018/06/low-res-banner.jpg" ></video>

<script>
var Video = document.querySelector('video');
Video.onended = function(e) {
  Video.currentTime = 4;
  Video.play();
};
</script>

This code is actually pretty simple.  It basically says “When the video ends… move the play-head to the 4-second mark.  Then play the video.”  This results in an endless loop.

Play A 2nd Video After The 1st Video Ends

Sometime you might want to play 2 videos in sequence, like this stylish video banner on UsePlink.com (designed by the web firm mollie.com)

When I saw this website, I took some time to dissect it and recreate it.  You can look at the code here.

Tip #9: Make AutoPlay Work on Mobile Devices

Mobile devices disable auto-play by default.  Normally the user clicks on the video to play it, and the video plays full-screen. 

This makes sense for stand-alone videos, but not for video banners that are part of your website layout.

You COULD use an animated gif, but animated gifs are generally large and download slowly.  Using an HTML5 video will download faster and use less battery on smartphones.

The Rules…

To keep people from abusing the technology, any videos that plays automatically cannot play sound (which makes sense because nobody wants to go to a website and have unsolicited videos yelling at them).

To make your video play on smartphones (as well as desktops) you need to add the following attributes to your video tag:

• playsinline
• muted
• autoplay

<video autoplay playsinline muted controls width="100%" height="auto" src="https://www.launch2success.com/wp-content/uploads/2020/07/Girl-Opening-Tent.m4v" poster="https://www.rexburgcamprentals.com/wp-content/uploads/2018/06/low-res-banner.jpg" ></video>

“playsinline” allows the video to play without going into full-screen mode, and “muted” turns off the sound (in case the video has any).

One Video on Screen at a Time

On smartphones, you can only have 1 auto-play video on screen at a time.  That means you can’t have one video playing an animated logo in your header, and another video as the background for your hero-banner.

Bonus Tip – Keyframes

Sometimes you may need to tightly control the playback of a video.

For example, take a look at these two videos. Try scrubbing through both videos quickly.

Video 1 No Keyframes

Video 2 – Keyframes

When scrubbing through the first video quickly, the video has to stop and ‘seek’ before continuing to play.  But scrubbing through the second video happens almost instantly.

Why is this?

The second video was compressed using additional key frames.  

How To Add Keyframes

Open your video in Handbrake.  On the “Video” tab, under “Extra Options” type in keyint=8 . This will place a keyframe every 8 frames.

When To Use Keyframes

Adding more keyframes will make your video file larger.  The Earth video without keyframes is 1.6MB while the video with keyframe is 3.6MB. 

After some experimentation with my Earth video, every 8 frames seemed to be the sweet-spot between file-size and scrubbing-smoothness.

Tell Us Your Thoughts

Was this guide helpful?  Do you have any additional tips for making Video Banners? 

Let us know in the comments below…