Fix the Menu-Video Overlap

For anyone who uses lots of videos on a WordPress site, you probably have run across this issue.  Your drop-down menu gets hidden BEHIND the video.  Example:

In this example you can see that the drop-down menu disappears behind the video box.  Yes, it’s true that you can go into every single embed code on your site and add an opaque value to the code.  But that method will require you to do it for EVERY single video.  If you have a lot of videos on your site, this will take quite a bit of time.  This little tutorial will provide you with the necessary code to fix this issue for all your videos.

The following code will be adding a filter to the WordPress hook the_content.  By adding a filter, anytime an video embed code appears, it will automatically add the opaque value for you.  This code should be placed in the functions.php file in your activated theme’s folder.

//Fix video drop-down menu overlap problems
function add_opaque_to_all_flash($string) {
$string = str_ireplace(‘<embed type=”application/x-shockwave-flash”‘, ‘<param name=”wmode” value=”opaque”><embed type=”application/x-shockwave-flash” wmode=”opaque”‘, $string);
return $string;
}
add_filter(‘the_content’, ‘add_opaque_to_all_flash’);

Once you save the functions.php file, refresh on any of your WordPress pages/posts that are having the menu/video overlap issue and you will see that the fix is working.  Example:

Digging Further:

Let’s take a closer look at the code we just added to the functions.php file.  The add_opaque_to_all_flash function looks for the following string of characters (a generic video embed code), and then adds the opaquevalues to the param name wmode.

Now that we defined the function we just use the simple add_filter to add the add_opaque_to_all_flash function to the_content hook in WordPress.
I hope this helps anyone who has run into this issue.  Keep following WebDesign.com for more practical tips and tricks to take full advantage of WordPress.