An extra wrapper is all we need to make this technique work in Internet Explorer versions 5, 6, and 7. (IE 8—as with other browsers—does not need this.)
#containingBlock {
width: 50%;
}
.videoWrapper {
position: relative;
padding-top: 25px;
padding-bottom: 56.25%;
height: 0;
}
* html .videoWrapper {
margin-bottom: 45px;
margin-bot\tom: 0;
}
.videoWrapper div,
.videoWrapper embed,
.videoWrapper object {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
<div id="containingBlock">
<div class="videoWrapper">
<div>
<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed>
</object>
</div>
</div>