TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

Videos styled with an intrinsic-ratio

This is based on an article published on A List Apart. It demonstrates two features that the original article does not expand much on: "dynamic resizing" and "extra content". It also shows how to create a single object across browsers versus nested ones.

Dynamic resizing

Styling the video wrapper with a width set in EMs makes the video expand or shrink depending on text size; using percentage (%) makes the video resize depending on its parent's width.

“Behind the scene” content

We can take advantage of the way elements are styled to insert content into the video wrapper (behind the video). Because that content is not within the object itself, nor styled off-screen, it should be available to most users for whom the video does not show.

Note that IE5 increases the height of the video to make room for that text but without revealing it. This browser hides the text but paints black stripes at the top and bottom of the video.

See demo page

CSS

#containingBlock {
  width:50%;
}
.videoWrapper {
  position: relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
  font-size:.9em;
}
* html .videoWrapper {
  margin-bottom: 30px;
  margin-bot\tom: 0;
}
.videoWrapper div,
.videoWrapper object {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
}

Markup

      
<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://d.yimg.com/cosmos.bcst.yahoo.com/up/fop/embedflv/swf/fop.swf?shareEnable=1&amp;id=11795504&amp;autoStart=0&amp;infoEnable=0&amp;shareEnable=0&amp;prepanelEnable=1&amp;carouselEnable=0&amp;postpanelEnable=1" />
      <![endif]-->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="http://d.yimg.com/cosmos.bcst.yahoo.com/up/fop/embedflv/swf/fop.swf?shareEnable=1&amp;id=11795504&amp;autoStart=0&amp;infoEnable=0&amp;shareEnable=0&amp;prepanelEnable=1&amp;carouselEnable=0&amp;postpanelEnable=1" width="480" height="270">
      <!--<![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>
    <h2>Description of the video embeded in this document</h2>
    <p>Ted Drake, a Yahoo based in Paris, talks about Food and the BOSS API. Ted uses BOSS to power his blog: www.insiderfood.com.</p>
  </div>
  ...
</div>

Read the original article to find out more about this technique. You can also join the discussion there.

Please use this contact form to send feedback and report errors.