(If you’re just looking for the technical notes, skip to the bottom of the article)
A video banner can make your site stand out from the crowd. When it’s done properly, it makes the site look much sharper and more professional. When it’s done poorly, it leads to much higher bounce rates.
It’s an important thing to get right and it’s not easy. We pride ourselves on have a LOT of experience making sure our clients’ sites look amazing when we have video banners to work with.
Just a few examples of our work:
https://nouvellevie.com
Some Background
Right now, video is all the rage online. With ever-increasing bandwidth at everyone’s disposal, more powerful machines, and increased storage, the technical bar for getting into video has drastically gone down.
We regularly have clients asking us about video for their projects and, while we do feel that video is important, it’s also not for everyone.
Embedding video onto a website properly is tricky. It’s difficult to execute well from a design standpoint (given that you have to balance desktop and mobile experiences) and even harder from a technical standpoint.
It’s easy to just drop in a YouTube link and set the auto play but most of the time it doesn’t look good. It ends up being a distraction instead of adding to the experience of the site.
Our secret is that we don’t embed video for all of our clients and when we do, we do so very carefully. We also insist on a few things from the client to make sure the outcome always looks good.
There are two separate, but very important elements to how we approach adding video to a client’s site: from a design perspective; and from a technical perspective.
DOING IT PROPERLY: DESIGN
The most important question you need to answer is: will video help get the client’s message across?
For some of our clients, video makes no sense. We are currently working on a project for an IT company and we specifically chose to move away from a video banner because what they are selling is an abstract service. We didn’t want to paint the visitor’s perception of the brand based on a tangible, literal idea of what that brand is supposed to be, as with so many stock imagery cliches in that industry.
Instead, we’re creating a light, interactive JavaScript background with the company’s logo and tagline dead center. No distractions, just a very clear, targeted, impactful statement about who they are. For this client, video would be a huge distraction and take away from what we are trying to achieve.
Next, the video has to act as a background. This is a difficult concept for many video companies to understand. We work extremely closely with our partners at Chivalric who fully understand our vision before executing on anything with the client.
A background video means that there should be no sound, no embedded text, and the principle focus needs to be in the center. These sound like weird details but you have to understand the medium.
When most video companies think about their work, they have the luxury of a fixed aspect ratio. So many times, they will think about the screen as a fixed box where they have the full range of width and height to achieve the experience they want to convey to the audience. This is plain WRONG.
Any video company that thinks like this does not understand web. Again, we work closely with Chivalric and they get it.
When you’re working with web, and you’re looking to use video as a design element, the aspect ratio is unpredictable. Practically everyone has a different screen size and resolution these days and, as web designers, we understand that.
If you put important elements near the edge of a video, it will likely get cut off for a large part of your audience. If you use sound as a background video, people will leave your site. If you try and embed text, it will likely not show up in the right place (again, because of aspect ratios).
A good background video should not need to be the focal point of the design. On mobile devices, we disable video playback on purpose to make sure no one is accidentally downloading a 10mb video via their phone data.
What we do is use video as a way to enhance the desktop experience and add life to our sites. The videos need to be cut in a way that the transitions are timed to give the correct feeling for the company’s branding.
That’s why our video banners have such a punch to them.
For the full technical steps, scroll down to the last section of the article.
DOING IT PROPERLY: CODE
Funny enough, this is more straightforward. We use our videos as banner backgrounds so we just make sure that we create a proper space for them, then layer the other items on top.
We load the videos dynamically using JavaScript so that we don’t load the videos on mobile devices and we have a chance to wait for the video to load before we try and play it.
We also make a point to use mp4 links to take advantage of html5’s
Finally, while we do use Vimeo to store our video file, we use them as a CDN (content delivery network) so that we don’t bog down our own servers. This is more of a infrastructure decision than a coding decision but I think it’s worth noting.
In order to get the mp4 link from Vimeo, we did have to upgrade our account from the free version, however, this also gives us to playback statistics which helps with our marketing teams.
So Why Has It Stopped Working?
The short answer is that it hasn’t. It’s just that it’s probably broken on your site because it wasn’t implemented properly (sorry, that sounds harsh but it’s true).
In an effort to maintain or increase user loyalty, browsers are constantly making updates to give their users the most comfortable user experience. Browsers make money by getting you to use their software (link to another article that explains how).
One of the things that people have been getting annoyed with in recent years is the auto-playing videos on websites.
Have you ever opened a couple of tabs while surfing Reddit just to have one of them start blaring annoying music through your speaker? Then you have to figure out which tab is playing the sound so that you can just close the site and move on?
This is not a new problem
In recent months, Chrome added an audio icon to the offending tab so that you can more quickly identify which site you never want to visit again. They went further by allowing you to right-click on the tab to mute it. Today, autoplay content doesn’t start until Chrome detects that you are actually on the tab (which I personally find annoying when I open up music and just want it to load in the background).
Well this weekend, Chrome went a little further and decided to push another to improve user experience. Any video that autoplays with sound now gets their autoplay option overridden (generally speaking).
This is nothing new. Any web developer worth their salt would tell you that Safari has actually been doing this for about a year now.
OK, I Get the Problem, So How Do I Fix It?!
If you’ve read the entire article, you should know that the proper way to have an embedded video as your background banner is to use JavaScript to dynamically load the video by creating a <video> tag. The following instructions are based on tis idea:
a. src = "mp4_source"
b. type = "video / mp4"
4. Your final step is to use JavaScript to start the video. If the id of the <video> tag is "whatever_your_id_is", then the code would look like this:
a. what_your_id_is.play ()
- Make sure you are using the .mp4 link (not a YouTube or Vimeo link)
- Create a <video> tag that has the following attributes:
1. id = "whatever_your_id_is"
2. loop = "loop"
3. mute = "true"
-
Within the <video> tag, add a <source> tag with the following attributes:
a. src = "mp4_source"
b. type = "video / mp4"
4. Your final step is to use JavaScript to start the video. If the id of the
a. what_your_id_is.play ()
To put it all together, below is our code for the Belon site:
var videoFile = 'https://player.vimeo.com/external/258140699.sd.mp4?s=4e66af3e6843406a65133d127c72cc2c26e4d64f&profile_id=165';
// standard desktop
var videoHTML = '
videoHTML + = '<source data-cke-saved-src="' + videoFile + '' type =" src="https://www.drivemarketing.ca/admin/'%20+%20videoFile%20+%20''%20type%20=" video="" mp4="" "=""> ';
videoHTML + = 'Your desktop does not support the video tag.';
videoHTML + = '';
$ ("# video-container"). html (videoHTML);
$ ("# video"). on ('loadedmetadata', function () {
video.play ();
});
The important thing to note is the attribute muted=”true”. Without this attribute, your video will not autoplay. This is now by design with Safari and Chrome and I’m sure that FireFox will follow suit shortly.
Our code is designed to follow Google's own guidelines for autoplay video. Though it seems to be working for the time being, it's difficult to predict what the future for this technology will be.
If you have a problem playing video on your site, and you need help, you should contact us. We are techies but we also understand business so don’t feel intimidated if you don’t fully understand this article: that’s what we’re here for!
The important thing to note is the attribute muted=”true”. Without this attribute, your video will not autoplay. This is now by design with Safari and Chrome and I’m sure that FireFox will follow suit shortly.\
Our code is designed to follow Google's own guidelines for autoplay video. Though it seems to be working for the time being, it's difficult to predict what the future for this technology will be.
If you have a problem playing video on your site, and you need help, you should contact us. We are techies but we also understand business so don’t feel intimidated if you don’t fully understand this article: that’s what we’re here for!
