Skip to content

Instantly share code, notes, and snippets.

@Alexintosh
Created May 24, 2016 18:22
Show Gist options
  • Save Alexintosh/421bcd8f63728f7b5eb71ad35be755ae to your computer and use it in GitHub Desktop.
Save Alexintosh/421bcd8f63728f7b5eb71ad35be755ae to your computer and use it in GitHub Desktop.
(function(){
// Find all YouTube videos
var $allVideos = $(".video_responsive"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
var $parW = $(this).parent().width();
$el
.width($parW)
.height($parW * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment