em
sOn 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 em
s allows the videos to grow or shrink depending on the user’s text-size settings.
#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;}
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();
};
<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>