Question

Ok, i know it has been asked several times but i didn’t find a cross browser solution and don’t get the hang of it. 🙁

I have this code to scale a video to 100% browser width:

<div id="flashposition"><div id="flashvimeo"class="vimeo">HereIsTheVideo</div></div>

and this css:

#flashposition {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0px;
height: 0;
z-index:30;
display: block;
overflow:hidden;
}

#flashvimeo object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

It works, but cuts off the excess height at the bottom, but i would like it to be centered, so excess height of the video is cut of half at the top and bottom.

Any ideas that are safe and also work in IE7? Or is the only way to do it in js/jquery and recalculating height/width due to browsers window size like here http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php ?

Answer 1

Unfortunately there isn’t an elegant cross browser, backward compatible solution to this without script.

However CSS3 supports box-flex with box-orient: horizontal; which is designed to do exactly what you want. Browser support for CSS3 is still a bit thin on the ground so if you want a solution that works for everyone you’ll need to use the window resize event and layout with script.

HTML 5 Rocks – flexbox