Skip to content

Instantly share code, notes, and snippets.

@miguelmota
Last active April 30, 2017 17:44
Show Gist options
  • Save miguelmota/5424416 to your computer and use it in GitHub Desktop.
Save miguelmota/5424416 to your computer and use it in GitHub Desktop.
(function() {
// Responsive Video
function responsiveVideo(selector) {
// Get videos
var videos = document.querySelectorAll(selector);
// Loop through videos
for (var i = 0; i < videos.length; i++) {
var video = videos[i];
// Get aspect ratio
var videoRatio = (video.height / video.width) * 100;
// Stretch video
video.style.position = 'absolute';
video.style.top = 0;
video.style.left = 0;
video.setAttribute('width','100%');
video.setAttribute('height','100%');
// Add a wrapper to contain video
var wrapper = document.createElement('div');
wrapper.className = 'video-wrap';
wrapper.style.width = '100%';
wrapper.style.position = 'relative';
wrapper.style.paddingTop = videoRatio + '%';
// Add it to the DOM
var parentNode = video.parentNode;
parentNode.insertBefore(wrapper, video);
wrapper.appendChild(video);
}
}
// Initialize. Make sure it's after DOMContentLoaded.
responsiveVideo('.video');
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment