Created
May 19, 2011 04:37
-
-
Save jordanlewiz/980199 to your computer and use it in GitHub Desktop.
CSS3 Media Queries Adaptive iframes (resizing Youtube, Vimeo etc)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* jQuery DOM ready handler | |
*/ | |
$(document).ready(function(){ | |
Involved.init(); | |
}); | |
/* | |
* Browser resize handler | |
*/ | |
$(window).resize(function(){ | |
Involved.resizeVideoEmbeds(); | |
}); | |
var Involved = function(){ | |
function init(){ | |
resizeVideoEmbeds(); | |
} | |
function resizeVideoEmbeds(){ | |
var container_width = $("#blog .article").width(); | |
var orig_width = 0; | |
var orig_height = 0; | |
var ratio = 0; | |
$(".article iframe").each(function(){ | |
orig_width = $(this).attr("width"); | |
orig_height = $(this).attr("height"); | |
ratio = (orig_height/orig_width).toFixed(2); | |
$(this).width(container_width); | |
$(this).height(ratio*container_width); | |
}); | |
} | |
return{ | |
init: init, | |
resizeVideoEmbeds: resizeVideoEmbeds | |
} | |
}(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to add this to my Joomla Site? Thanks