SWFObject + width set in ems

On this page we use the SWFObject script to “generate” the wrapper div for IE and to plug in the class name we need for our styling. Also, setting the width of the containing block in ems allows the videos to grow or shrink depending on the user’s text-size settings.

16:9 Yahoo!

CSS

#containingBlock {
  width:20em;
}
.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,
.videoWrapper embed {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
}
/* ratios */
.wideScreen {padding-bottom: 56.25%;}
.fourBYthree {padding-bottom: 75%;}
/* chromes */
.chrome_25 {padding-top: 25px;}
.chrome_30 {padding-top: 30px;}

Javascript

SWFOject.js (edit to make around line 117 of v1.5):


// adding a videoWrapper class and plugging a wrapper for IE
n.className += " videoWrapper";
if(typeof document.documentElement.style.zoom != "undefined"){
	var wrapper4ie = document.createElement("div");
    n.appendChild(wrapper4ie);
    wrapper4ie.innerHTML = this.getSWFHTML();
}else{
   	n.innerHTML = this.getSWFHTML();				
};

Markup

<div id="containingBlock">
  <h2>4:3 Yahoo!</h2>
  <div id="yahoo" class="wideScreen chrome_30"></div>
  <script type="text/javascript">
    var so = new SWFObject("http://d.yimg.com/cosmos.bcst.yahoo.com/up/fop/embedflv/swf/fop.swf?shareEnable=1&id=11795504&autoStart=0&infoEnable=0&shareEnable=0&prepanelEnable=1&carouselEnable=0&postpanelEnable=1", "mymovie", "", "100%", "8", "#336699");
    so.write("yahoo");
  </script>
</div>