Responsive video (updated)

It’s been a while since I posted about how to make a locally-hosted video responsive, using Video JS. Since then, Video JS itself has been updated (the current version at the time of writing is 3.2.0), and although I posted an update in the comments of my previous post, several people were still getting confused, so thought best to post again here. Essentially, the containing div that Video JS uses changed, hence requiring a change to the CSS. Instructions as follows:

 

The (Updated) Responsive Video Solution

Please see example here: http://skybolt.xssl.net/~hexagon2/responsive-video/ – try resizing your screen in an older version of IE, and the video should still resize. In the example, I’m using WordPress & the WordPress VideoJS plugin, but I believe this should work with a non-WP site and the standard VideoJS script too. The solution is entirely HTML/CSS based (i.e. no javascript in addition to that used by VideoJS), and is essentially a modified version of the technique described on A List Apart here: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

 

HTML

The normal Video JS code is wrapped in a containing div as follows:

This containing div needs to be added around the result of the video js shortcode. There are two ways of doing this – either use the HTML editor within a post, so you’d end up with something like this:

or alternatively (what I did when I originally worked this out for a client project), create a custom field for the video to be uploaded to, then in the relevant php file (this might be in page.php for example), you would have something like this:

(where $mp4 and $webm are variables containing the path to the relevant video files, grabbed from the custom fields).

 

CSS

The CSS is what does the trick (add it to your standard styles.css file in your theme (wp-content/themes/your-theme-name/styles.css), or to a separately referenced stylesheet if you’d prefer). It does rely on having a videos of fixed proportion (hence the 41% value), but I wonder whether this could also be combined with a modification of the Fit Vids script (which currently just works with hosted video from YouTube etc) to take this constraint away. For my purposes, fixed proportion was fine.

And there you have it – a responsive video – not only in browsers that support HTML5 but in those that don’t too. I hope this continues to help people!

35 Responses to “Responsive video (updated)”

  1. Brian

    Your CSS instructions appear to be missing a the last line from your demo.

    .video-js img.vjs-poster {
    height: 100% !important;
    width: 100% !important;
    z-index: 1;
    }

    should be

    .video-js img.vjs-poster {
    height: 100% !important;
    width: 100% !important;
    z-index: 1;
    max-width: 100%;
    }

    That max-width definition seems to be critical in making all this work, at least for my purposes! :)

  2. Brian

    hope that makes sense with all the whitespace stripped out! ;(

  3. Brian

    also, the poster image seems to be breaking at my end, unless i add
    { position: absolute !important;
    top: 0;
    left: 0; } to .video-js img.vjs-poster

    Thanks for sharing your code, and I hope my comments help anyone running into the same problems I had!

  4. sarah

    Hi Brian,

    Many thanks for your comments, and my apologies it has taken me so long to respond (client work has to come first I’m afraid!!).

    Thanks for the tip on the max-width – I have updated the post accordingly.

    Sarah

  5. Yahr

    Hi, the video is responsive for me, but I am getting black bars on the top and bottom of my video when I shrink the browser window. It appears the height is not adapting to the change in size, although the width is.

    I am loading my videos dynamically with ajax if you think that may be making the difference?

  6. sarah

    Hi Yahr – not sure what could be causing the problem. Do you have a link to the site & I’ll try & have a look if I get a minute?

  7. Steph

    Hi,
    I have tried this on my website with no luck. On chrome, firefox and internet explorer 8, the size of the player remains static. In internet explorer 7 it is responsive but if I add a video of a different size from the one one the videojs website, I get black bars on the sides because the height is not changing.

  8. sarah

    Hi Steph – sounds similar to the problem Yahr reported above… do you have a site URL I can look at if I get a moment?

  9. sarah

    Anyone with the black bars problem… check the padding-bottom value of .videoWrapper (2nd line of CSS above) – this should be altered to fit the dimensions of your video, width/height. As per this paragraph above: “It does rely on having videos of fixed proportion (hence the 41% value)…”

  10. Steph

    Thank you. That helped with the black bars on internet explorer 7.
    However I still have the problem on Chrome, firefox and internet explorer 8 that the videos are not responsive. Neither the height or width changes when I resize my browser.

    I’m working on an intranet so I can’t give you a link to the site.

  11. Courtney

    Sarah, Thanks so much for this! It is a life saver. Brian, thanks for your additional comments. I had the same issue.

  12. Steph

    Hi,
    I have tried again to get this working on my website. The videoWrapper div is responsive and changes with the size of the browser, however the video itself does not fill the div, it stays at it’s original size.

  13. sarah

    Hi Steph, Sorry to hear you’ve still not got it working. It’s hard to tell what could be causing the problem without being able to see it – if you can upload the site/page somewhere I’d be happy to take a quick look for you.

    You definitely have the height/width of the video set to 100% (in CSS)?

  14. Steph

    Yes, I copy-pasted the code you have above and only changed the padding-bottom to match the size of my video.

    I am pretty new to this whole web programming thing…Where do I go to just upload a page/site?

  15. sarah

    Hi Steph,

    Normally you will need an account with a hosting provider. Try a search on Google for website hosting.

    Alternatively, if you’d like to email me your code, I will do my best to take a look at it at some point…

  16. Matt

    Thanks for this cool technique! That’s a nice implementation of the intrinsec ratios concept.

    I’m gonna use it on my site, with two minor adjustements :
    -a secondary wrapper to be able to control the width of the container (we can’t just change the width of .videoWrapper div without breaking the setup)
    -a bit of javascript to dynamically set the correct ratio in order to be able to handle videos with a non-static ratios.
    The javascript goes like this (with jQuery) :

    $('.videoWrapper').each(function(){
    $(this).css('padding-bottom', $(this).find('.video-js').attr('height') / $(this).find('.video-js').attr('width') * 100 + '%');
    });

    Oh, and by the way there is a minor error in the comments of your code: /* video dimensions – width/height */ should be /* video dimensions – height/width */

  17. sarah

    Thanks for sharing that Matt, haven’t tried it out but looks good for dynamic ratios.

    Have corrected the comment error – thanks for spotting that.

  18. Jack Zelig

    Great article!
    Thanks ever so much for sharing this.
    You’ve saved me hours of pulling my hair out.

  19. Eric

    Sarah, juste un IMMENSE MERCI de Suisse pour votre Super Article et pour le suivi des mises à jour des codes. Pas de bla-bla juste de grands résultats. Votre article est dans mes favoris.

    Sarah, just HUGE THANK from Switzerland for your Super Article and post updates codes. Not a talking-shop just great results. Your article into my bookmarks. (Sorry for my poor english)

  20. sarah

    Eric – you’re welcome, glad I could be of help.

    p.s. I have fond memories of my trip to Switzerland a few years back – it is a beautiful country!

  21. Tom

    Hi, thanks, it works great.
    My only issue is that in IE, the player won’t go fullscreen. The button seems to toggle, but nothing happens with the screen size. Do you have this bug as well?

  22. Sarah

    Hi Tom,

    Thanks. Not that I know of, although I haven’t tested on the latest versions on IE/VideoJS. Does my test page work ok in the same version you’re using? If so, I suggest installing a vanilla version of VideoJS and checking whether that works on your site ok. If it does, apply the responsive styles one by one to see what could be causing the problem. If it doesn’t, then I guess try it on a fresh WP install with default theme, then gradually apply styles until it breaks…

    Hope that helps…

  23. Tom

    Ok thanks, I’ll try that.
    By the way, I just tried the container using JWPlayer as well, and it worked great, nothing broken and fully responsive.

  24. Aaron

    Thank you for this, Sarah. Very, very helpful. I just added your styles to the bottom of the video-js.css in a section called “Responsive Fix”

  25. Sarah

    You’re welcome – glad it helped. Bear in mind that if you add the code to the VideoJS CSS file, you will need to re-add if/when you upgrade to a new version. It’s probably better to add it to your default stylesheet, or a separate stylesheet called specifically for this purpose.

  26. Jonathan

    With the WordPress plugin, you only have to check the “responsive video” box in the “video.js settings” and set the default width to a big value (bigger than the container – “1000”, for me) and the height to the ratio you want (“550″ for me). The plugin will adjust the width of the video to 100% of the container.
    You don’t have to add “px” or “%” after these values otherwise it won’t work

  27. David

    Thank you for sharing. Worked well with the latest version of video-js (4.3)

Leave a Reply

  • (will not be published)

Current ye@r *