YouTube widescreen video

Just like the teal box in the previous example, the video below should keep its format regardless of the viewport width.

CSS

#containingBlock {
  width:50%;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}
.videoWrapper object,
.videoWrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Markup

<div id="containingBlock">
  <div class="videoWrapper">
    <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>