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:
|
1 |
<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:
|
1 2 3 |
<code><div class="videoWrapper"></code>
[video mp4="http://video-js.zencoder.com/oceans-clip.mp4" webm="http://video-js.zencoder.com/oceans-clip.webm" poster="http://video-js.zencoder.com/oceans-clip.png" controls="true" ]
<code></div></code> |
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:
|
1 |
echo do_shortcode('[video mp4="'.$mp4.'" webm="'.$webm.'" controls="true" width="570" height="439" preload="false"]'); |
(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.
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
.videoWrapper {
position: relative;
padding-bottom: 41%; /* video dimensions - width/height */
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!
they do exist you know!)
