Rendering of the lead character from the open source Blender film Sintel

HTML5 video has the same syntax, and the same issues, as the <audio> tag: codec support changes in different browsers, and the need for a fallback solution for browsers that do not support the element, such as IE.

The basic structure is the same; the <video> tag can use the same autoplay, loop, and preload attributes as the <audio> tag. The only difference is that unlike audio, video has a specific size. width and height for the video should be entered with CSS:

<video controls style="width: 50%; height: auto;">
	<source src="sintel.mp4" type="video/mpeg">
	<source src="sintel.webm" type="video/webm" >

Note that this CSS will make the video responsive, just like a fluid image. In fact all of CSS, including transforms, can be used to style the <video> element.

You can also use the poster attribute to point the <video> tag to an image that acts as a placeholder for the movie (by default, the <video> tag will only show the first frame of the file as its default, which may well be black, or may otherwise misrepresentation of the film as a whole):

<video controls poster="atlanta-placeholder.jpg" style="width: 50%; height: auto;">
	<source src="atlanta.mp4" type="video/mpeg" >
	<source src="atlanta.webm" type="video/webm" >

Enjoy this piece? I invite you to follow me at to learn more.