public
Created

YouTube iframe Embed and Resize to Content

  • Download Gist
page.html
HTML
1 2 3 4 5
<script src="page.js"></script>
...
<!-- You can set the initial size to something sensible, but it will get resized on loading -->
<iframe src="http://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>
...
page.js
JavaScript
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// usage:
//$(window).smartresize(function(){
// // code that takes it easy...
//});
 
$(function() {
 
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
 
// The element that is fluid width <-- This needs to be changed!
$fluidEl = $("article");
 
// 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
// (You'll probably want to debounce this)
$(window).smartresize(function() {
 
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
 
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
 
});
 
// Kick off one resize to fix all videos on page load
}).resize();
 
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.