Are you tired of trying to find fixes for YouTube iFrame videos or other embedded iFrames overlapping parts of your website that won’t work in every browser(especially IE)? Sure there’s a simple fix by just adding “wmode=opaque” to the end of the source string but what if you have tons of videos already on your site? In this quick tutorial we will show you an easy way to automate the addition of “wmode=opaque”, using jQuery, to all embedded iFrames on your website. This will not only fix any new iFrame videos added to your website but all previous iFrame videos as well.

The jQuery Fix

Simply add this jQuery script inside the head tag of your website and you’re done:

<script type="text/javascript">
$(document).ready(function(){
    var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        frames[i].src += "?wmode=opaque";
    }
});
</script>

Once added, test your website, your embedded iFrames should now never overlap any sections of your website that are using the z-index property.

Don’t Forget jQuery

This fix relies on the jQuery JavaScript library in order to function; you must either link directly to jQuery or download the latest version and upload it to your server. Here’s an example of ours located in our WordPress theme:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js">
</script>

Download jQuery

You can download the latest version of jQuery HERE.

Posted In

Tutorials