Complete Breakdown of Responsive Videos

There had been a few posts on the forum asking about adding responsive videos. At the time I was unable to give a good answer. Now I have taken time to do a bit of research and I able to give a number of responsive video solutions. The solutions are in the order of difficulty, starting with the easiest solution. These are the players that I am going to be covering today.

• YouTube
• Sublime Video
• Wistia
• Simple HTML5 Video
• Simple HTML5 Video with flash fallback
• MediaElement.js
• Video.js
• Flowplayer
• JW Player
• Important info on FitVids.js
• Troubleshooting

YouTube

• Very easy to set up
• Needs FitVids.js so that it is responsive
• The video is hosted on YouTube
• Works easily on multiple devices and browsers

The easiest solution is to use YouTube. It works on multiple devices. In some countries YouTube plays an advertisement before the video. If  you upload your own video this should not be the case. At the end of the video you get a grid with other videos. If you don’t want those then when embedding YouTube make sure you uncheck the “Show suggested videos when the video finishes”.

Youtube Demo

The rest of the solutions are for those who do not want to use the YouTube player and wish to host their own video.

Sublime Video

• Easy to set up with the code generator
• Need to add JavaScript code
• No need for FitVids.js
• Basic HTML5 code with flash fallback for IE8
• Works with self hosted videos and YouTube videos

Sublime offers a solution for your own hosted videos and also YouTube videos. Chose your option and then add the link to your media or for the YouTube videos add the video id.

In the video setting the “Fit” option is very important.

At the end you can click on the “Get the Code” button at the bottom. You will then get a code like this.

The next step is to add the JavaScript. Every site has its own file.

Sublime Demo (YouTube video) Sublime Demo (hosted video)

Wistia

• Very Simple – only one file to upload
• the code is an iframe
• Hosted on the Wistia servers
• built in Video analytic
• Free version (3 videos / 5 GB bandwidth / branded player)
• Paid version begins at $25/mo
• has additional featured e.g. social sharing, call to action, require email to play and a few more which you can find here.

Solution 1

Wistia Demo

Solution 2

There is a solution where Wistia supports  responsive videos with their own code. So FitVids.js is not needed. To be able to achive this you need to chose the API option.

Then you need to add videoFoam: true to the same place where the videoWidth is.

Example code

Wistia own Demo Wistia my Demo

Simple HTML5 Video

• Need to create markup
• simple set up
• videos hosted on own site
• different players on every browser
• IE 8 and lower are not supported

The video tag is a new standard to display videos. I have added more information then you might need. To understand it best I have split this section into two parts.

• HTML5 Markup – HTML5 Video & Source Tags
• Video Files – mp4, webm & ogg

HTML5 Markup

Here is a simple code example

So that the videos will work on multiple browser we will need multiple formats.

Here is a simple code example. I have also added a possibility to load a lower resolution video for smaller devices.

The video Tag has the following attributes. Some of them are easy to understand.

• global attributes – standard atributes like class and id
• autoplay
• preload - none, metadata, auto
• controls
• loop
• poster – poster=”/image.jpg”
• height
• width
• mediagroup – control two media elements(videos) through the first element(video)
• muted
• src – video link

W3 Video Tag Reference

Here are the source attributes.

• global attributes
• src
• type
• media

W3 Source Tag Reference

So to have a responsive HTML5 video you need to have this CSS.

You can use a service provided by video.js to create HTML5 video markup.

Video Files

There are three main video files.

Format	Video Encoding	MIME-type
MP4	H264	video/mp4
WebM	VP8	video/webm
Ogg	Theora	video/ogg

Not every browser supports all formats that is why we include all of them in the html. The easist way to get your video in the different formats is to use Miro converter

• Mozilla Firefox – WebM, Ogg
• Google Chrome – MP4, WebM, Ogg
• Opera – WebM, Ogg
• Safari – MP4
• Internet Explorer 9+ – MP4
• Internet Explorer 6-8 – No HTML5, Flash Only!

To test it your self Video Format Test

WordPress does not support webm at the moment and for that reason you will need to add the following code to your themes functions.php. If you are running a multisite you will need to check the list of allowed files.

If you want any further reading then read this

HTML5 multiple format Demo

Simple HTML5 Video with flash fallback

• The same points as for HTML video except with IE8 and lower support

This is how the code would look like with FlowPlayer being used as the backup.

To save time you could use the Video for Everybody generator by Jonathan Neal to generate the code snippet according to your options. (FlashFox player seems to only resize if the browser is refreshed but does not change size dynamically,)

A complete explanation can be found at Kroc Camen’s site, the originator of this technique.

HTML5 with flash fallback Demo

MediaElement.js

• Standard Player
• out of the box responsive
• Supports HTML5 Video
• Automatically supports IE8 and lower
• Working WordPress plugin
• Does not need FitVids.js

How to get it running on your site.

1. First you need to download the files.
2. Open the zip file and then extract the build folder
3. Move that build folder to your child theme. You can rename the folder if you want
4. Load mediaelement-and-player.min.js and mediaelementplayer.min.css
5. Load this javascript to activate the MediaElements player
   
   JavaScript

   // activate mediaelementplayer jQuery('video,audio').mediaelementplayer(/* Options */);

   1 2	// activate mediaelementplayer jQuery('video,audio').mediaelementplayer(/* Options */);

6. Then you can include the HTML video code.
   
   <video width="320" height="240" controls preload="metadata"> <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4"/> <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/> <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg"/> </video>

   1 2 3 4 5

   <video width="320" height="240" controls preload="metadata">     <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4"  type="video/mp4"/>     <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/>     <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv"  type="video/ogg"/> </video>

MediaElement Demo

MediaElement.js WordPress plugin

This is very simple. Install the plugin and then add this shortcode to the post or page. Just change the links to your video.

MediaElement WordPress Plugin Demo

Flowplayer

• No need of FitVids.js
• Easy to use
• Customisable players

Simply add this HTML to page or post.

Flowplayer Demo

Design your own player, Video attributes, Additional options

Video.js

• Flash Fallback
• WordPress Plugin
• Needs FitVids.js

1. Load the JavaScript and Stylesheet
2. Add the markup e.g.
   
   <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> <div class="video-js-wrapper"> <video id="video-js-1" class="video-js vjs-default-skin" controls width="960" height="540" poster="http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg" preload="auto" data-setup="{}"> <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4"/> <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/> <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg"/> </video> </div>

   1 2 3 4 5 6 7 8 9

   <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> <div class="video-js-wrapper">     <video id="video-js-1" class="video-js vjs-default-skin" controls width="960" height="540" poster="http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg" preload="auto" data-setup="{}">         <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4"/>         <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/>         <source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg"/>     </video> </div>

3. Add extra css
   
   CSS

   .fluid-width-video-wrapper .video-js { position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important; }

   1 2 3 4 5 6 7

   .fluid-width-video-wrapper .video-js {     position: absolute;     top: 0;     left: 0;     width: 100%!important;     height: 100%!important; }

4. Activate FitVids.js for Video.js
   
   JavaScript

   // FitVids jQuery(document).ready(function(){ // Target your #container, #wrapper etc. jQuery("#wrapper").fitVids({ customSelector: "div[class^='video-js-wrapper']"}); });

   1 2 3 4 5

   // FitVids jQuery(document).ready(function(){ // Target your #container, #wrapper etc.     jQuery("#wrapper").fitVids({ customSelector: "div[class^='video-js-wrapper']"}); });

Video.js Demo

Options Documentation

Video.js WordPress plugin

The plugin does make it a bit easier to host the files. So install the plugin then add this code. Just change the video links and size.

Videos.js WordPress Plugin Demo

JWPlayer

• Popular
• Not responsive out of the box
• Extra work for every video

Standard embed with responsive CSS Solution

I have found another way of making JWPlayer responsive. This should be a bit easier.

1. Add this code to the page or post
   
   <script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script> <div id='player_1'></div> <script type='text/javascript'> jwplayer('player_1').setup({ file: "https://grapplerulrich.s3.amazonaws.com/html5video/trailer_1080p.mp4", width: "100%", height: "100%", stretching: "fill", flashplayer:"http://player.longtailvideo.com/player.swf" }); </script>

   1 2 3 4 5 6 7 8 9 10 11

   <script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script> <div id='player_1'></div> <script type='text/javascript'>   jwplayer('player_1').setup({     file: "https://grapplerulrich.s3.amazonaws.com/html5video/trailer_1080p.mp4",     width: "100%",     height: "100%",     stretching: "fill",     flashplayer:"http://player.longtailvideo.com/player.swf"   }); </script>

2. Change the div id so that is different for every video. Make sure it matches the code in the JavaScript.
3. Add this css
   
   CSS

   #player_1_wrapper { width: 100%; position: relative; padding: 0; padding-bottom: 56.25%; } #player_1_wrapper object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   #player_1_wrapper {     width: 100%;     position: relative;     padding: 0;     padding-bottom: 56.25%; }   #player_1_wrapper object {     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%; }

   
   You will need to add this css for every video.
4. So that the video keeps its proportion you will need to change the padding-bottom percentage. This is calculated video height/width*100. E.g. 540/960*100 =56.25%.

JW Player wo/ iframe Demo

iframe Solution

The solution that I have for JW Player is a hack that Ethan from Longtailvideo sent me. Here is how to do it.

1. Download the files
2. Copy jwplayer folder to your child theme using a ftp client
3. Create a html file in the child theme
4. Paste this code in
   
   <!DOCTYPE HTML> <html> <head> <title> JWPlayer Reponsive Video </title> <script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"> </script> <style type="text/css"> html, body { height: 100%; width: 100%; padding: 0; margin: 0; } #player { height: 100%; width: 100%; padding: 0; } </style> </head> <body> <div id="player"> </div> <script type="text/javascript"> jwplayer("player").setup({ file: "http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4", image: "http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg", height: "100%", width: "100%", stretching: "exactfit", flashplayer:"http://player.longtailvideo.com/player.swf" }); </script> </body> </html>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

   <!DOCTYPE HTML> <html>     <head>         <title>             JWPlayer Reponsive Video         </title>         <script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js">         </script>         <style type="text/css">             html, body {                 height: 100%;                 width: 100%;                 padding: 0;                 margin: 0;             }             #player {                 height: 100%;                 width: 100%;                 padding: 0;             }         </style>     </head>     <body>     <div id="player">     </div>         <script type="text/javascript">             jwplayer("player").setup({                 file: "http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4",                 image: "http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg",                 height: "100%",                 width: "100%",                 stretching: "exactfit",                 flashplayer:"http://player.longtailvideo.com/player.swf"             });         </script>     </body> </html>

5. Change four links – Change the location of jwplayer.js, jwplayer.flash.swf, the video link and either update the image link or remove it.
6. Then add an iframe with the link pointing to the newly created html file.
   
   <iframe width="940px" height="540px" src="http://grappler.tk/wp-content/themes/responsive-testing/jwplayer-iframe.html" frameborder="0" allowfullscreen=""></iframe>

   1	<iframe width="940px" height="540px" src="http://grappler.tk/wp-content/themes/responsive-testing/jwplayer-iframe.html" frameborder="0" allowfullscreen=""></iframe>

7. Then we have to make sure that FitVids.js will work with this iframe. More on this here.

JWPlayer iframe Demo

JWPlayer Documentation

FitVids.js

Here are a couple of important things to know about FitVids.js.

The current version of FitVids.js conflicts with Video.js and MediaElement.js. That is why I would recommend using my version. It can be found on GitHub.

So that the video doesn’t distort script calculates the aspect ration. This is calculated by dividing the height by the width in the html code. That is why it is important the width and height is correct.

When adding iframes from other sources then it is necessary to add selectors. So that I can add an iframe from this site I would use this JavaScript. It is also important to check if www is used or not.

 

Troubleshooting

Here are two links to help with troubleshooting the video setup

Multimedia Troubleshooting, longtailvideo.com