Fluid iframe sizing for youtube videos using jQuery

JQuery script for making fluid video iframes. (Youtube)

The problem

As I've just learned, iframes suck in fluid layouts.
something like
<iframe width='100%' height='auto'> </iframe> 

Doesn't work, instead you'll get something like this

The fix

So googling for a solution I found a pretty dated jQuery solution.
There are some css only solutions out there, but I don't want to add more classes since my pesudo markdown language is complex enough.
I ended up modifying the jQuery bit I found to produce this


function resize_allVideos() {

// Resize video to parent container's width using saved aspect ratio.
$('iframe[src*="youtube.com"]').each(function () { var newWidth = $(this).parent().width(); console.log(newWidth); $(this).width(newWidth) .height(newWidth * $(this).data('aspectRatio')); }); } $(document).ready(function () { // Save aspect ratio and remove default height / width
$('iframe[src*="youtube.com"]').each(function () { $(this) .data('aspectRatio', this.height / this.width) .removeAttr('height') .removeAttr('width'); }); resize_allVideos(); }); // Update on resize.
$(window).bind('resize', resize_allVideos);
this will result in
and scaled down you get
which is perfect for my needs.