Monkey Raptor

Wednesday, March 19, 2014

Automatically Append "wmode=transparent" to Embedded YouTube Video URL

This issue has been fixed if you use latest Firefox/Chrome/Opera/Safari/IE,
so that the video player can be served as HTML5 player. No transparency issue if using HTML5 player.

But, we can always equip our page with either of these auto-append-ers.

I put jQuery, pure JavaScript examples and the embedded demo here.
Either snippet will search all YT iframes on a page and then append the wmode parameter if the iframe doesn't have it.

#1 This is the jQuery version

Updated July 24, 2015
You can wrap the "loop through the iframes from YouTube" method (using each()) with $(document).ready(function(){ ... }); or not. I give the standard example above.
Just declaring method or wrapping it in an anonymous function handler for ready event will work.

If you're so fluent in front-end scripting, I suppose you'll do whatever you need to fit that into your script block.

# This is the demo of it

Updated July 24, 2015
You can drag the floating element (HOVERING TESTOR) to see the difference. Click the append or remove button. This works on 99.99% of recent browsers.

See the Pen That appending wmode by Monkey Raptor (@monkeyraptor) on CodePen.

The demo above is actually an iframe of the HTML file I put on my Google Drive CodePen.

It uses Pure CSS framework, jQuery and jQuery UI libraries there.

  • I "paraphrased" this "removing URL parameter" sweet answer on StackOverFlow - that Q&A is about removing the parameter, this post is about appending a parameter with a certain criteria of the URL.
  • Useful info: YouTube video ID format Q&A at StackExchange WebApps

#2 "Just" JavaScript version

Added on May 10, 2015 | Updated July 20, 2015

That snippet above is auto-invoked.

Thanks for visiting. See ya next time.

Automatically Append "wmode=transparent" to Embedded YouTube Video URL

No comments

Post a Comment

Tell me what you think...