Script that positions html element over YouTube video
In the previous article we discussed how to position HTML elements over YouTube video. The problem is that YouTube video overlaps any html element, by default. How to force YouTube video showing behind HTML elements with help of HTML approach read in following article How to position html elements over YouTube video.
Here you’ll see how to perform the same but with JavaScript approach. First, script finds all the YouTube iframes and then adds wmode parameter to them. This wmode parameter should have transparent or opaque values.
1 2 3 4 5 |
jQuery(function ($) { $("iframe[src]").each(function () { $(this).prop("src", $(this).prop("src") + "?wmode=transparent"); }); }); |
In this script jQuery of 1.8.2 is used. Note that this fix is needed for old browsers, for example, IE9 and older, some verstions of FireFox.
Thank you very much for your script “How to position html elements over YouTube video”!
I so now that I have to insert this one too, for older browsers.
Could you please explain me where I have to insert your following script: I try to prepare my first web-project and this is something I have to learn, thank’s in advance if you have the time to explain it to me !! Best, Michael
jQuery(function ($) {
$(“iframe[src]“).each(function () {
$(this).prop(“src”, $(this).prop(“src”) + “?wmode=transparent”);
});
});
Michael, first try to use html+css approach as described in the article https://starikovs.com/2012/10/27/position-html-elm-over-youtube/, you can play with the example here http://jsfiddle.net/buhvf/1/. In this approach you just add “?wmode=transparent” to the end of the YouTube video’s URL.
If you want the JavaScript variant to use, just add the code above to your script.js or any other file where your scripts is located. Alternatvely, you can insert this script into tag which should be in the
section of HTML page. BTW, don’t forget about jQuery library to include.