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:
Using Marc’s site again as an example, lets see what code is being inserted to generate that embedded video:
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:
You can of course, also target the ‘object’ and ‘embed’ elements within a specific div, like your main content block for example:
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.