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
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
You can download the latest version of jQuery HERE.