Skip to content

Instantly share code, notes, and snippets.

@tspringborg
Last active December 19, 2015 07:19
Show Gist options
  • Save tspringborg/5917627 to your computer and use it in GitHub Desktop.
Save tspringborg/5917627 to your computer and use it in GitHub Desktop.
Make video-js responsive. Dependencies; Modernizr, jquery
//make videojs responsive
$(function() {
$('.video-js').each(function() {
// Once the video is ready
var videoElm = $(this);
_V_($(this).attr('id')).ready(function() {
var myPlayer = this; // Store the video object
var aspectRatio = 9 / 16; // Make up an aspect ratio
function resizeVideoJS() {
console.log("resizing video")
//flash fallback behaves differently
if (!Modernizr.video) {
$(videoElm).css('width', '100%');
var h = $(videoElm).width() * aspectRatio;
$('.video-js').css('height', h + "px");
} else {
console.log("resizing video")
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.width(width).height(width * aspectRatio);
}
}
if (!Modernizr.video) {
console.log("handling flash video");
//give flash some time to setup.
var delay = setInterval(function() {
resizeVideoJS(); // Initialize the function
clearInterval(delay)
}, 2000)
} else {
resizeVideoJS(); // Initialize the function
}
window.onresize = resizeVideoJS; // Call the function on resize
})
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment