{"id":2558,"date":"2012-09-29T23:28:44","date_gmt":"2012-09-29T23:28:44","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=2558"},"modified":"2017-03-16T11:21:16","modified_gmt":"2017-03-16T18:21:16","slug":"fix-youtube-iframe-on-top-of-overlay-modals","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/fix-youtube-iframe-on-top-of-overlay-modals.html","title":{"rendered":"Fix Youtube Iframe On Top Of Overlay Modals"},"content":{"rendered":"

2013-08-27 The new editor from WordPress automatically moves the height and width right after the link which causes the script NOT to work. I have to modify so that it will work as long as the height is set at 315 px as default with youtube HD. Now it will work with the new editor. If we use the height without the value which will work great for all sizes of youtube, but it will change the amazon iframe with height also – most of amazon ads heights are 240px.<\/i><\/p>\n

function add_video_wmode_transparent($html) {
\nif (strpos($html, “<iframe” ) !== false) {
\n$search = array(‘” height=”315″‘, ‘?hd=1?hd=1’);
\n$replace = array(‘?hd=1&wmode=transparent” wmode=”Opaque” height=”315″‘, ‘?hd=1’);
\n$html = str_replace($search, $replace, $html);<\/p>\n

return $html;
\n} else {
\nreturn $html;
\n}
\n}<\/p><\/blockquote>\n

2013-08-14 Retested with ie8 and Safari – didn’t work – need to add “wmode=transparent” – New codes are below and make sure all iframe youtube has “frameborder” right after the “src” and not any other code in between like “allowfullscreen”.<\/p>\n

function add_video_wmode_transparent($html) {
\nif (strpos($html, “<iframe” ) !== false) {
\n$search = array(‘” frameborder=”0″‘, ‘?hd=1?hd=1’);
\n$replace = array(‘?hd=1&wmode=transparent” frameborder=”0″ wmode=”Opaque”‘, ‘?hd=1’);
\n$html = str_replace($search, $replace, $html);<\/p>\n

return $html;
\n} else {
\nreturn $html;
\n}
\n}<\/p><\/blockquote>\n

2012-10-04 After adding the Share This button to the post, I found out the codes below replace all iframes which Amazon banners and Share This also became “transparent”. I found another way for WordPress users to specifically replace only youtube iframes embedded codes. Place the codes below in the theme’s function.php<\/em><\/p>\n

\n

<\/em>function add_video_wmode_transparent($html) {
\nif (strpos($html, “<iframe” ) !== false) {
\n$search = array(‘” frameborder=”0″‘, ‘?hd=1?hd=1’);
\n$replace = array(‘?hd=1&wmode=opaque” frameborder=”0″‘, ‘?hd=1’);
\n$html = str_replace($search, $replace, $html);<\/p>\n

return $html;
\n} else {
\nreturn $html;
\n}
\n}
\nadd_filter(‘the_excerpt’, ‘add_video_wmode_transparent’, 10);
\nadd_filter(‘the_content’, ‘add_video_wmode_transparent’, 10);<\/p><\/blockquote>\n

This code works very well and Share This button doesn’t complain any more. The original codes.<\/a><\/em><\/p>\n

When we put Amazon iframe little displays with ‘frameborder=”0″‘ , it only show default Amazon’s\u00a0 ads.<\/em><\/p>\n

\n

<\/em>\"\"<\/a><\/p>\n

We need to remove the ‘frameborder=”0″‘ codes inside the ads.<\/em><\/p>\n

<\/em>\"\"<\/a><\/p>\n

The display will be good again.<\/em><\/p>\n

\"\"<\/a><\/p>\n

When we use image pop-up modals like Fancybox, Shadowbox, Mediabox Advanced together with embedded iframe youtube video, the overlay will stay under the youtube frame on ie (internet explorer) browsers. The only way to fix this is to either add “? or &wmode=”opaque” or “transparent”” at the end of every youtube link on your blog or fix it with javascript<\/a>.<\/em><\/p>\n

To fix a single youtube iframe<\/em><\/p>\n

\n

<\/em>\/\/www.youtube.com\/embed\/zofscYJkS-8?rel=0&wmode=”opaque”<\/p>\n

\/\/www.youtube.com\/embed\/zofscYJkS-8&wmode=”opaque”<\/p>\n<\/blockquote>\n

If we already have too many posts with embedded iframe youtube with “?rel=0” and no flag mixed then add this script in the footer.php or before the <\/body> of the html page.<\/em><\/p>\n

\n

<\/em><script type=”text\/javascript”>
\nwindow.onload = function() {
\nvar frames = document.getElementsByTagName(“iframe”);
\nfor (var i = 0; i < frames.length; i++) {
\nframes[i].src += “?rel=0&wmode=opaque”;
\n}
\n}
\n<\/script><\/p>\n<\/blockquote>\n

Youtube without “?rel=0”<\/em><\/p>\n

<p style=”text-align: center;”><iframe src=”\/\/www.youtube.com\/embed\/zofscYJkS-8″ frameborder=”0″ width=”420″ height=”236″><\/iframe><\/p><\/p>\n