Fluid Video
An embedded HTML5 video that scales appropriately according to screen size. Will also fallback safely to a linked image for clients that don't support embedded video.
<style>
/* Fluid Video Media Pattern CSS */
@media only screen and (max-width: 599px) {
div[class="pattern"] video,
div[class="pattern"] img
{
width: 100%;
height: auto !important;
}
}
</style>
<div class="pattern">
<video style="padding: 0px; margin: 0px; display: block;" poster="http://b.vimeocdn.com/ts/364/865/364865123_960.jpg" controls="controls" height="337" width="600">
<source src="http://player.vimeo.com/play_redirect?quality=hd&codecs=h264&clip_id=52861634&time=1361256207&sig=21d65c6cd03979983f6efa864c746c06&type=html5_desktop_local" type="video/mp4"></source>
<source type="video/ogg" src=""></source>
<source type="video/webm" src=""></source>
<a href="http://vimeo.com/52861634"><img style="display: block;" border="0" src="connecting-fallback.jpg" width="600" height="337" label="Fallback Image" /></a>
</video>
</div>