Responsive HTML5 video shortcode for WordPress

Here is the code for functions.php

/* HTML5 video shortcode */
function html5_video($atts, $content = null) {
	extract(shortcode_atts(array(
		"webm" => '',
		"ogg" => '',
		"mp4" => '',
		"width" => '',
		"height" => '',
		"poster" => ''
	), $atts));
	$poster = ($poster != "") ? "poster='".$poster."'" : "";
	$height = ($height != "") ? "height='".$height."px'" : "";
	$width = ($width != "") ? "width='".$width."px'" : "";
	$string = "<video ".$poster." ".$width." ".$height." controls autobuffer>";
	$string .= "<source src='".$webm."' type='video/webm; codecs=\"vp8.0, vorbis\"'/>";
	$string .= "<source src='".$ogg."' type='video/ogg; codecs=\"theora, vorbis\"'/>";
	$string .= "<source src='".$mp4."' type='video/mp4; codecs=\"avc1.4D401E, mp4a.40.2\"'/>";
	$string .= "<p>Your browser does not support HTML5 video. Please upgrade.</p>";
	$string .= "</video>";
	return $string;
}

add_shortcode('video5', 'html5_video');

Required CSS:

video {
  width: 100%    !important;
  height: auto   !important;
}

This shortcode…

[video5 webm="movie.webm" ogg="movie.ogv" mp4="movie.mp4" width="720" height="480" poster="movie.jpg"]

…will output:

<video poster="movie.jpg" controls>
        <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
        <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'/>
        <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
        <p>This is fallback content</p>
</video>

Try this as an example:

[video5 webm="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" ogg="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" mp4="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" width="720" height="480"]