320px Mp4 Files Can Make Awesome Video Banners
All you need is an optimized mp4 and a couple of images
If you want to take advantage of the clickbait power of video banners, here’s our quick guide to creating a new video banner in a wordpress sidebar widget.
Please note that to get the best from making mp4 video banners you should have at least a very basic grasp of HTML and CSS.
Step One: The Video
All video banners start with an optimized mp4 file. For our demo we’re going to use this 138kb optimized mp4 – which is hosted at:
https://bullion.directory/wp-content/uploads/2018/10/usa-flagvid.mp4
It’s a patriotic flag waving in the breeze and sure to get the attention of your target market…
In wordpress you can simply paste an mp4’s URL into a sidebar text widget editor and it should automatically load a video player when viewed – but we want more control – we want the video to autoplay, to be set to mute (so Chrome won’t ignore it) and to loop so it will run continuously.
Step Two: AutoPlay, Mute and Loop
HTML5 Video tags come with a number of useful features – autoplaying, looping and setting to mute.
To do this we add the following code:
<video width="100%" autoplay loop muted> <source src="https://bullion.directory/wp-content/uploads/2018/10/usa-flagvid.mp4" type="video/mp4"> </video>
As well as muting, looping and autoplaying this code will set the video to 100% of the sidebar’s width.
So far, so video – but we want an actual banner with a link and some sort of Call to Action.
Step Three: Banner Design
It’s time to crack out your image editor.
If your sidebar is say 300px wide, you would create a 300px wide image.
For this demonstration we’re going to use a version of an existing 300×250 banner, the Alternative Assets IRA “Liberty” banner:
This has been edited to give it a semi-transparent background. Why? So we can see that billowing US flag below it…
The following code will insert the banner image immediately below the video:
<video width="100%" autoplay loop muted> <source src="https://bullion.directory/wp-content/uploads/2018/10/usa-flagvid.mp4" type="video/mp4"> </video> <img src="https://bullion.directory/wp-content/uploads/2018/10/animated-liberty2.png" />
But this is no use to us, we want the image to be laid OVER the video…
Step Four: Fixing Positioning
The banner image needs pulling up and over the video.
To do this we’ll use use CSS and it’s useful negative margin function. By creating a top negative margin, the image will be dragged up above the video.
Depending on your image size, you may need to play around with this negative margin figure until you get the look you want.
Finally, just to be sure the image covers the video and not that the video covers the image which it may on some browsers, we’ll use CSS again to set a z-index for the image higher than that of the video (z-index is a layering order for everything displayed on a page).
<video width="100%" autoplay loop muted style="position:relative; z-index:1;"> <source src="https://bullion.directory/wp-content/uploads/2018/10/usa-flagvid.mp4" type="video/mp4"> </video> <div style="margin-top:-83.5%; position:relative; z-index:100;"> <img src="https://bullion.directory/wp-content/uploads/2018/10/animated-liberty2.png" /> </div>
Step Five: Get Clicking
The most vital step in turning a video into a video banner is adding a clickable link.
This is quick and easy – all we need do now is wrap all the code in a link:
<a href="YOUR AFFILIATE LINK" title="Your Link Title"> <video width="100%" autoplay loop muted style="position:relative; z-index:1;"> <source src="https://bullion.directory/wp-content/uploads/2018/10/usa-flagvid.mp4" type="video/mp4"> </video> <div style="margin-top:-83.5%; position:relative; z-index:100;"> <img src="https://bullion.directory/wp-content/uploads/2018/10/animated-liberty2.png" /> </div> </a>
This video banner will work, but (and there’s always a but) some responsive websites do peculiar things with their sidebars on large phones or small tablets. What was once a sidebar can become a footer section much wider than 300px.
Step Six: Fixing Width Issues
To fix the problem with some sites over-stretching and ruining your carefully laid out design we’ll add a division wrapping the banner and style it to be no wider than 300px – the size we chose earlier:
<div style="max-width:300px;"> <a href="YOUR AFFILIATE LINK" title="Your Link Title"> <video width="100%" autoplay loop muted style="position:relative; z-index:1;"> <source src="https://bullion.directory/wp-content/uploads/2018/10/usa-flagvid.mp4" type="video/mp4"> </video> <div style="margin-top:-83.5%; position:relative; z-index:100;"> <img src="https://bullion.directory/wp-content/uploads/2018/10/animated-liberty2.png" /> </div> </a> </div>
All good? Well once again, no – there are some devices and browsers that don’t autoplay videos and there are others that simply won’t run an HTML5 video. We need some fallbacks.
Step Seven: Allowing For Problems
Not all browsers act the same. Not everyone allows scripts to run.
To cater for these situations, we need to add a video poster and a stand-in image. Then just to be fully covered, we can add a background image to the video while it’s loading on slow connections.
We’ll use the same image for all three functions:
https://bullion.directory/wp-content/uploads/2018/10/usa-flag-bg.jpg
Giving a final HTML code:
<div style="max-width:300px;"> <a href="YOUR AFFILIATE LINK" title="Your Link Title"> <video poster="https://bullion.directory/wp-content/uploads/2018/10/usa-flag-bg.jpg" width="100%" autoplay loop muted style="position:relative; z-index:1; background-image: url(https://bullion.directory/wp-content/uploads/2018/10/usa-flag-bg.jpg); background-size:100% 100%;"> <source src="https://bullion.directory/wp-content/uploads/2018/10/usa-flagvid.mp4" type="video/mp4"> <img src="https://bullion.directory/wp-content/uploads/2018/10/usa-flag-bg.jpg" style="width:100%;" alt="video stand in" /> </video> <div style="margin-top:-83.5%; position:relative; z-index:100;"> <img src="https://bullion.directory/wp-content/uploads/2018/10/animated-liberty2.png" /> </div> </a> </div>
When this is running in a 300px wide sidebar your completed video banner will look like this:
Ta-dah!
With a different video and image you can go for a whole different effect.
How about a cascade of glistening gold over a Regal Assets bullion bar?
Ka-pow!
There’s little that can’t be done with a short video and a semi-transparent image – and from testing clickthrough rates are typically 3-4 times higher than for static banners.
After this your video banners are only limited by your imagination…
Resources
B-Roll Videos Free For Commercial Use:
Some excellent free videos which can be used for ANY commercial project.
https://videos.pexels.com/
https://pixabay.com/en/videos/list/
Video Minimizer:
Fast free online video minimizer – recommend scale to 320px and remove audio – can easily reduce file size by 80% allowing for self-hosting and reducing load on visitor’s computer.
http://www.videosmaller.com/