This is me

Using jQuery to resize embedded videos

I read an article yesterday by MarcForrest.com on the new Flipboard app for the iPad and I saw again a problem that I see on quite a few sites. A YouTube (or other) video source is embedded into your site and either a) you haven’t set the default for the widths & heights of your embedded objects, or the source dictates the width which then doesn’t match the width of your blog’s content pane. Either way, you end up with this:

Not ideal.

Enter jQuery.

Using Marc’s site again as an example, lets see what code is being inserted to generate that embedded video:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
     <param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" />
     <param name="src" value="http://www.youtube.com/v/v2vpvEDS00o&amp;hl=en_US&amp;fs=1" />
     <param name="allowfullscreen" value="true" />
     <embed type="application/x-shockwave-flash" width="640" height="385" src="<a href="http://www.youtube.com/v/v2vpvEDS00o&amp;hl=en_US&amp;fs=1" target="_blank">http://www.youtube.com/v/v2vpvEDS00o&amp;hl=en_US&amp;fs=1</a>" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Notice that both the object and the embed elements have widths & heights set.

So what we’re going to do, is basically change the values of the width and height parameter. Here’s the code that does it:

$(document).ready( function() {
     $('object').attr('width', '450px');
     $('embed').attr('width', '450px');
});

You can of course, also target the ‘object’ and ‘embed’ elements within a specific div, like your main content block for example:

$(document).ready( function() {
     $('.main_content_block object').attr('width', '450px');
     $('.main_content_block embed').attr('width', '450px');
});

So the embed window is resized automatically and ensures that the video will never overlap the edges of your blog. Another benefit of this method, is that if you redesign/change your theme and your content block is a different width, you just update the value in the jQuery and presto… :)

Give it a try and let me know how it works for you.