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.Anywayne...
You need to update your browser to the latest version available.
Then, you might wanna go to this URL
www.youtube.com/html5to find out about your browser compatibility for the HTML5 video player.
The player transparency (depth) is the Flash plugin related issue. We're gonna use wmode parameter to override the default opaque mode.
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":
put the additional
wmode=transparentparameter to every embedded YT video.
I'm gonna embed this McBain's interview clip of his new movie Let's Get Silly on this post. This is the embed
iframecode I got from YouTube (I changed the height to
<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
<iframe width="640" height="360" src="https://www.youtube.com/embed/BBHvl5i059c?wmode=transparent" frameborder="0" allowfullscreen></iframe>
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
The one with the wmode=transparent
If your embedded
iframeURL source already has another additional parameter, such as
fs=1or 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?Use the
fs=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>
&(standard HTML) to place the
wmodeparameter 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
iframesource URL) and replace it with
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
iframeURL source. You don't want every single
iframefrom 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.
jQuery script B
This works only for embedded video that has already had parameter(s) attached.
Note: useYou mustn't use both scripts at once, just choose one.
&instead of just
&for Blogger (XHTML).
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
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="480" src="https://www.youtube.com/embed/videoseries?
That's about it.
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
iframesource. 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.