Tumblr Video Overlay

I recently came across a bug with Tumblr. Now this could just be the theme itself, I’m not sure. Whether you’re getting the same bug on Tumblr or something else you’re working on, this fix will apply to most sites with embedded videos.

The problem i was having was with the embedded video within the page. When opening one of the tumblr overlays in IE or Chrome (FF excluded), any video posted on the page behind it would appear over top of the overlay. Most people already know about the infamous wmode=transparent parameter or z-indexing when it comes to overlay issues. But when you don’t have access to the embed code itself, simply dropping in a wmode tag isn’t as easy as it sounds. Here’s how I did it using simple jQuery:

$(document).ready(function (){
    var url = $(this).attr('src')

Note: this can also be applied to embed tags or object tags.

After the page is loaded, I’m pulling any iFrame tag that’s written to the screen. Within the iFrame tag i pull the source url and replace it with itself plus the wmode=transparent parameter. This can be applied to any site with this problem, whether you have access to the tags and there’s just too many on the site to go through, or you simply need it to be added after the page loads. Hope this helps.

Leave a Comment