If I may add something in for you guys, I think one solution. I’m using themify.me’s ‘basic’ theme as a framework for a different site and they address the problem in a purely html/css format by doing the following.
1. From the functions.php file, videos links are automatically placed within a div with a class of ‘post-video’ and a transparent background.
///////////////////////////////////////
// Add wmode transparent and post-video container for responsive purpose
///////////////////////////////////////
function themify_add_video_wmode_transparent($html, $url, $attr) {
$html = '<div class="post-video">' . $html . '</div>';
if (strpos($html, "<embed src=" ) !== false) {
$html = str_replace('</param><embed', '</param><param name="wmode" value="transparent"></param><embed wmode="transparent" ', $html);
return $html;
}
else {
if(strpos($html, "wmode=transparent") == false){
if(strpos($html, "?fs=" ) !== false){
$search = array('?fs=1', '?fs=0');
$replace = array('?fs=1&wmode=transparent', '?fs=0&wmode=transparent');
$html = str_replace($search, $replace, $html);
return $html;
}
else{
$youtube_embed_code = $html;
$patterns[] = '/youtube.com\/embed\/([a-zA-Z0-9._-]+)/';
$replacements[] = 'youtube.com/embed/$1?wmode=transparent';
return preg_replace($patterns, $replacements, $html);
}
}
else{
return $html;
}
}
}
add_filter('embed_oembed_html', 'themify_add_video_wmode_transparent');
2. The css used against ‘post-video’ looks like this…
/************************************************************************************
POST VIDEO (css for fluid video)
*************************************************************************************/
.post-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin-bottom: 15px;
}
.post-video iframe,
.post-video object,
.post-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
