desideratum

How to fix Tumblr’s video embed issues

The Problem:

I use a tumblelog theme wherein a section is affixed (via “position: fixed”) to the bottom of the page. I want to embed a video from some streaming site (e.g. Vimeo), but the embed code does not include the following parameter that prevents objects from appearing on top of other elements on the page:

<param name="wmode" value="transparent" />

This typically wouldn’t be a big deal because adding the above code inside the <object> fixes the problem; however, attempting to do so in Tumblr’s “Add a Video” field strips out the fix as soon as the post is submitted/modified.

For reference, here are side-by-side screenshots of the proper behavior (left) and the improper behavior (right):

The Fix:

Before I get into the step-by-step, I’ll explain the process at a high level.

First, CSS fixes need to be applied to set and order the z-indexes of any relevant elements.

Second, JS should be added that sets wmode="transparent" on the <embed>. Note: these JS steps can be done without any frameworks, but I chose to use jQuery due to it being more readable and easier to follow.

Last, target IE and replace the entire <object> element with the <embed> element. The <embed> code is stored as the altHtml attribute of the <object>.

Got that? OK, here’s how it’s implemented:

1. Edit the theme HTML and wrap any video (ex. {Video-500}) and audio (ex. {AudioPlayerBlack}) tags in a container with class media-container like so:

   {block:Video}
   <div class="media-container">{Video-500}</div>
   

2. Add styles to the CSS to apply z-indexing to the container in the previous step:

   .media-container { position: relative; z-index: 1; }

   Make sure you apply positioning and appropriate z-indexing to (1) the element you want to appear above the video AND to (2) the parent elements all the way up to their common ancestor if necessary. To be clear, you should apply a position (say, “relative”) and a higher z-index (like “5”) to the element you want to appear above the video. Then, you position the parent elements and set their z-indices to “1”.

3. Include the jQuery framework before the closing </body> tag. I suggest using the one hosted by Google for the best performance benefits:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

4. Add the JS fixes as follows (pieces are commented for easy reference):

   <script type="text/javascript>
   jQuery.noConflict(); /* 1 */
       if ( !jQuery.support.htmlSerialize ) { /* 2 */
           jQuery('.media-container object')
               .each(function() {
                   jQuery(this).replaceWith(jQuery(this)
                   .attr('altHtml'));
               });
       }
   
       jQuery('.media-container embed') /* 3 */
           .attr('wmode','transparent')
           .eq(0).after('<div></div>');
   </script>

   #1 makes sure there are no issues with using jQuery if you have another JS framework already included in your page.

   #2 targets IE through feature detection. First, each <object> is selected and iterated over. Then each <object> is replaced by the value of its altHtml attribute. In these cases, the complete <embed> is stored as the altHtml.

   #3 selects all of the <embed> elements on the page and adds wmode=”transparent” to their attribute lists. Afterwards, the selection is filtered to only the first <embed> and an empty div is created after it in order to update the DOM and redraw the <embed>.

As of this posting, the fix has been verified for IE7, FF3, Safari 4/mac, and Google Chrome. If you have any issues or questions, feel free to leave them in the comments.