Fixing Embedded YouTube Video (iFrame) Transparency

This issue has already been fixed
(Thanks to Chromium/Chrome developer team and YouTube team)

YouTube provides HTML5 player now. The external plugin, such as Flash, is optional now for streaming any YouTube video.
You need to update your browser to the latest version available.
Then, you might wanna go to this URL www.youtube.com/html5 to find out about your browser compatibility for the HTML5 video player.
Anywayne...

The player transparency (depth) is the Flash plugin related issue. We're gonna use wmode parameter to override the default opaque mode.

If you're embedding YouTube video on your blog, and you have some HTML element layers floating 'above' it, like navigation, sharer or something else, you'll notice that the embedded YouTube video will force itself to stay on top.
That's because, by default, the YouTube iframe (the Flash embedded video) is using the opaque mode. Meaning that, it will always stay 'view-able' even though it's 'below' other HTML element.
I experienced that especially when using Chrome and Safari. When I used FireFox, it consistently 'fix'-ed the 'depth' (transparency). For all Webkit mania, these methods below probably are useful (for Flash player).

The methods to make it "transparent":

#1 Manually
put the additional wmode=transparent parameter to every embedded YT video.

Example:
I'm gonna embed this McBain's interview clip of his new movie Let's Get Silly on this post. This is the embed iframe code I got from YouTube (I changed the height to 360):

<iframe width="640" height="360" src="https://www.youtube.com/embed/BBHvl5i059c" frameborder="0" allowfullscreen></iframe>

Then, to make it transparent, meaning it won't screw up other HTML layers floating on top of it, I put this additional line ?wmode=transparent.

<iframe width="640" height="360" src="https://www.youtube.com/embed/BBHvl5i059c?wmode=transparent" frameborder="0" allowfullscreen></iframe>

RESULT
This blog uses the floating navigation, sort of. You can check the difference by scrolling down, click the "switch" on the left navigation, and hover your mouse cursor on the video when the floating menu on top of that.

Since this issue has been resolved, so, there'll be nothing different. Hopefully.

Anywho, you can check whether the video is served using Flash or HTML5 by right clicking on the video.

The one without the wmode=transparent

The one with the wmode=transparent

If your embedded iframe URL source already has another additional parameter, such as fs=1 or something else, well, look at the example below.

For instance, you have

<iframe width="640" height="360" src="https://www.youtube.com/embed/BBHvl5i059c?fs=1" frameborder="0" allowfullscreen></iframe>

Then do this

<iframe width="640" height="360" src="https://www.youtube.com/embed/BBHvl5i059c?
fs=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Use the & (XHTML) or & (standard HTML) to place the wmode parameter after the fs=1. The question mark (?) there simply as the opening for additional parameters of the YT embedded video.
If you don't want to use the earlier parameter anymore, then just delete the ?fs=1 (or other parameter you'd find in your iframe source URL) and replace it with ?wmode=transparent.

#2 Automatically
append the parameter to every embedded YT video.

If you have more than 10 embedded videos on your blog/website, it will be simpler to use script to do that. You have to be selective to assign the parameter for the iframe URL source. You don't want every single iframe from other sources other than youtube.com got altered.
I gathered info from many sources, then altered them a tiny weeny bit.

jQuery script A
This works only for embedded video that has no parameter attached.

$(document).ready(function () {
    $("iframe[src*='youtube.com']").each(function () {
        var url = $(this).attr('src');
        $(this).attr('src', url + '?wmode=transparent');
    });
});

jQuery script B
This works only for embedded video that has already had parameter(s) attached.

$(document).ready(function () {
    $("iframe[src*='youtube.com']").each(function () {
        var url = $(this).attr('src');
        $(this).attr('src', url + '&wmode=transparent');
    });
});

Note: use & instead of just & for Blogger (XHTML).

You mustn't use both scripts at once, just choose one. ~~This blog is using the script A.~~ Not anymore.

How to implement the jQuery script
You have to load the jQuery library to use one of the scripts above. I use the Google hosted library (Google public CDN). This is the latest 1.11.1 version:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

Put above the </head> tag of the HTML. Or just right before the actual (body) script — the (jQuery A/jQuery B) snippet above.
And for the (body) jQuery script, either of two snippets above, put it above the closing </body> tag of your HTML. That should work smoothly.

About the script A and B
If you've implemented the jQuery script A and still find some of your embedded videos are non-transparent, then you have to check the URL sources. My guess, they have other parameters attached in the URL. Delete those parameters, and you're good to go.

Embedded YT video playlist
For instance, this is a playlist:

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="480" src="https://www.youtube.com/embed/videoseries?list=PL1E1ADA69959707DE&hl=en_US" width="640"></iframe>

Then I put the wmode=transparent like so:

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="480" src="https://www.youtube.com/embed/videoseries?
wmode=transparent&list=PL1E1ADA69959707DE&hl=en_US" width="640"></iframe>

That's about it.

FUN!
right?

Note (update)
The automatic method using jQuery above can actually slowing down your site/blog significantly if you have tons of embedded YouTube videos. BECAUSE, your visitor browser needs to reload the iframe source. All you need to do is just stop using any HTML element that floats/hovers at the middle of your page content. Or, move it (the floating/hovering element) to your sidebar, and don't use the automatic method.

LINKS

Combining both scripts using indexOf filter, on this post
Documentation of YouTube player parameters is at Google Developers Site

Monkey Raptor

Monkey Raptor

Sunday, April 14, 2013

Fixing Embedded YouTube Video (iFrame) Transparency

2 comments