Integrating video into your website

Integrating video sounds easy on paper. But believe me, it isn’t. Video formats are a complete nightmare and even a simple player is hard to integrate.
In this post I will show you some important tricks that you will need in order to succesfully integrate video into your website.

HTML5 video element

Integrating a basic video into your website isn’t all that complex. All you need to do is to add a video element with a source to your HTML.
This will give you the standard video player offered by your browser.

<video controls>
  <source href="..." type="video/mp4"/>
</video>

It works in any modern browser, IE9+, FireFox, Chrome, Safari and Opera.

Video formats

The fact that you see a video element in the browser, sadly does not mean it will play a video file of your choice.
There’s a lot of video formats that are supported by different browsers. And to make things worse, there’s not a lot of overlap when it comes to supported video formats.
The following page provides a neat overview of all the supported formats: https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats#Browser_compatibility

After testing things out, I’ve discovered that the following combo of formats works on all browsers:

• MP4/M4V – Works on Firefox, Chrome, Safari and IE9+
• WebM – Works on chrome and Firefox, but not on the others.

Note: Although WebM doesn’t work out of the box on IE9 and Opera, you can get it to work with a separate plugin in the browser. If you like sensible options and don’t want to bother your users with plugins, you go with the MP4 route

Encoding your video

When encoding videos for the web, make sure you encode your videos in a web optimized format. I personally like Handbrake the best for encoding videos for the web. To encode videos in a web optimized format with Handbrake, you will need to follow this guide:

1. Open Handbrake and load the video source file
2. From the Apple presets choose “iPhone & iPod Touch”
3. Make sure you check the “Web Optimized” checkbox, which will make your video load much faster
4. Set everything else that you want for your video
5. Click “start” to start the encoding process

With these settings you end up with files that you can drop on the webserver and play right away. The web optimized flag will move the video header to the start of the file, so that the browser recognizes the video and starts playing, as soon as it receives the first chunk of data from the server.

Hosting your video

Speaking of receiving chunks. To get the best results, make sure that your webserver, serves the videofiles as Video/MP4 (for both m4v and mp4 file formats). IIS7 doesn’t contain these mimetypes. But once you add them, it does a great job at delivering the videos in a chunked format so that browsers can play them without downloading the whole file first.

More browser compatibility

The standard video element works for modern browsers, but there are still people out there with browsers that don’t support the video element, like IE8. For these visitors, you will want to provide an option to make things backwards compatible.

There’s a neat script available over on videojs.com that makes your video compatible with older browsers.
Follow the guide on the website and you have a much better experience.

Making the video responsive

Video.JS is a great script, but it does lack a lot in the responsiveness department. I found that if you don’t specify a width and height for the video, you will end up with a poststamp sized video element of 300×150 pixels. Why it’s so small is beyond me, but there’s a fix for that.

For the fix to work, you need to get and compile video.js from my personal github repo: https://github.com/wmeints/video.js
This repo contains a fix for the size problems that video.js has.

To compile the script, make sure that you have java.exe in your PATH and node.js installed on your computer.
With these two components installed, run the following commands:

npm install
npm install -g grunt-cli
grunt

This will install all the required dependencies for the video.js script, install the grunt commandline and run grunt to build the script.
After that you should have a video.js in the dist folder that you can use.

The next step is to make the video element responsive. For this you need to add the following bit of CSS to your stylesheets:

video {
  width: 100%;
  height: auto;
}

The last step is to add an extra piece of logic to your javascript files:

/*
    This script fixes a major issue with video.js not being responsive.
    Already fixed the video.js script to force it not to use the default width and height.
    This script adds another layer of fixes, to make it auto resize.
*/
(function () {
    function resizeVideoJS(player, element) {
        var width = element.parentElement.offsetWidth;

        // Reverse the aspect ratio, because
        // we're starting with the width rather than height.
        var aspectRatio = 9 / 16;

        // Resize the player
        player.height(width * aspectRatio);
    }

    function initVideoResize(element) {
        _V_(element).ready(function () {
            var player = this;

            resizeVideoJS(player, element);

            $(window).on('resize', function () {
                resizeVideoJS(player, element);
            });
        });
    }

    $(document).ready(function () {
        var elements = $("video").get();

        for (var i = 0; i < elements.length; i++) {
            initVideoResize(elements[i]);
        }
    });
})();

After this, your video elements are responsive, so that you can play the video on large screens and on mobile devices such as iPads and mobile devices.

Happy hacking!