Fixing YouTube video overlays in WordPress 3.2

WordPress has a very nice feature where you can embed YouTube videos in your blog posts by simply copying and pasting the URL on its own line. This is especially nice for clients who may be intimidated by the embed code you can copy directly from the YouTube page.

However, there's a slight problem with the code WordPress generates. If you have any overlaying elements, like a drop-down menu or a lightbox effect when images are clicked on, you'll notice that the video still sits on top of these things, obscuring them from view. This is because the generated code lacks a parameter wmode that tells the embedded Flash object how to position itself on the page. Without that specification it effectively positions itself absolutely on top of all of the other elements on a page — not even changing z-index on your other elements will fix this.

Fortunately, Crantea Mihaita came up with a nice solution I could borrow. His solution added the wmode parameter and set it to transparent; I changed it to opaque because it's supposed to be less resource intensive.

Here's a snippet of my updated code which I stuck in the functions.php file for my theme:

function add_video_wmode_transparent($html, $url, $attr) { if (strpos($html, "<embed src=" ) !== false) { $html = str_replace('<embed', '

add_filter('embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

It's a such a nice and simple fix I added it to my default HTML5 Boilerplate WordPress Theme that I forked a month ago. Hopefully a fix for this will find its way into the next version of WordPress, but I'm not holding my breath. WordPress' dedication to supporting legacy code, while admirable in some sense, seems to push tiny, easily fixable things like this to the eternal back burner.

Maybe its time for a more forward-thinking blogging platform that isn't afraid to leave old versions behind?