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>