JSFiddle - React, Tailwind, and code Playground
HTML
<div class="video_container">
<iframe width="425" height="349" src="http://www.youtube.com/embed/-SNytfkJD4U" frameborder="0" allowfullscreen></iframe>
</div>
<div class="sample"></div>
<div class="video_container">
<object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
CSS
.sample
{
width:150px;
height:850px;
background:#0fd;
z-index:100;
position:absolute;
top:0;
left:0;
}
JavaScript
$('iframe','.video_container').attr('width',320);
$('iframe','.video_container').attr('height',240);
$('object','.video_container').attr('width',320);
$('object','.video_container').attr('height',240);
$('embed','.video_container').attr('width',320);
$('embed','.video_container').attr('height',240);
var src=$('iframe','.video_container').attr('src');
if(src.indexOf('?')==-1)
{
src=src+'?wmode=transparent';
}
else
{
src=src+'&wmode=transparent';
}
$('iframe','.video_container').attr('src',src);
$('object','.video_container').append('<param name="wmode" value="transparent"></param>');
$('object','.video_container').find("embed").attr('wmode', 'transparent');
$('object','.video_container').each(function(){
this.innerHTML=this.innerHTML+'';
});