Fix Youtube Iframe On Top Of Overlay Modals

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.

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

return $html;
} else {
return $html;
}
}

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”.

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

return $html;
} else {
return $html;
}
}

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

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

return $html;
} else {
return $html;
}
}
add_filter(‘the_excerpt’, ‘add_video_wmode_transparent’, 10);
add_filter(‘the_content’, ‘add_video_wmode_transparent’, 10);

This code works very well and Share This button doesn’t complain any more. The original codes.

When we put Amazon iframe little displays with ‘frameborder=”0″‘ , it only show default Amazon’s  ads.

• The Best Light Weight Responsive Themes For WordPress
• Serenti Theme for Word Press
• WP Ocius By Candid Themes
• How To Customize Colorlib Sparkling Theme
• WP Blaskan Theme by Colorlib