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:
<div class="videoWrapper">[Video JS code here...]</div>
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:
<div class="videoWrapper"> </div>
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:
<div class="videoWrapper"><?php echo do_shortcode('');?></div>
(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.
.videoWrapper {
position: relative;
padding-bottom: 41%; /* video dimensions - height/width */
padding-top: 0px;
height: 0;
z-index: 1000;
}
video {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index: 1;
}
video.video-js {
z-index: 1000;
}
.video-js .vjs-controls {
z-index: 1002;
}
.video-js .vjs-big-play-button {
z-index: 1002;
}
.videoWrapper .video-js {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index: 1;
background: #000000;
}
.videoWrapper object,
.videoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
z-index: 1;
}
.vjs-spinner {
display: none !important;
}
.video-js img.vjs-poster {
height: 100% !important;
width: 100% !important;
z-index: 1;
max-width: 100%;
}
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!
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! 🙂
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
hope that makes sense with all the whitespace stripped out! ;(
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!
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?
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?
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.
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?
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)…”
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.
Sarah, Thanks so much for this! It is a life saver. Brian, thanks for your additional comments. I had the same issue.
Courtney – you’re welcome, pleased to be of help!
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.
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)?
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?
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…
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 */
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.
Sarah your css is a life saver. Thank you so much for sharing this.
Great article!
Thanks ever so much for sharing this.
You’ve saved me hours of pulling my hair out.
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)
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!
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?
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…
Sarah,
Does the video at http://skybolt.xssl.net/~hexagon2/responsive-video/ still work for you?
I tried resizing the browser while playing in Firefox 18.0.2 (mac) and Chrome Version 24.0.1312.57 (also on mac) and the video does not resize in either.
– Jack
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.
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”
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.
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
Hi,
The video at http://skybolt.xssl.net/~hexagon2/responsive-video/ will not resize for me in IE 10 or Chrome 26.
Has something in the default video js code changed to stop it working?
Thanks
Thank you for sharing. Worked well with the latest version of video-js (4.3)
Good – thanks for taking the time to leave a comment David.