The single-object method encodes the ampersands in the URLs using a solution inspired by the “nested-objects” method (but reduced to one single object).
#containingBlock {
width:50%;
}
.videoWrapper {
position: relative;
padding-bottom:56.25%;
padding-top:25px;
height:0;
}
* html .videoWrapper {
margin-bottom: 45px;
margin-bot\tom: 0;
}
.videoWrapper div,
.videoWrapper object {
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
}
<div id="containingBlock">
<div class="videoWrapper">
<div>
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1&showinfo=0" />
<![endif]-->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1&showinfo=0" width="480" height="295">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"/></a></p>
</object>
</div>
</div>
...
</div>