HTML5 Video Tag w/ Fallbacks

Host local video on your site without using streaming services like Youtube and Vimeo.

by Pete Fecteau

HTML

<video id="fpo" width="1000" height="562" poster="vid/fpo.jpg" preload="auto" autoplay loop>
    <source src="vid/fpo.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
	<source src="vid/fpo.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<source src="vid/fpo.webm" type='video/webm; codecs="vp8, vorbis"' />
	<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
		<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
		<param name="allowFullScreen" value="true" />
		<param name="wmode" value="transparent" />
		<param name="flashvars" value='config={"clip":{"url":"vid/fpo.flv","autoPlay":false,"autoBuffering":true}}' />
        <img src="vid/fpo.jpg" width="1000" height="562" />
	</object>
</video>

CSS

video {
    width:100%;
}