Shortcode for HTML5 Video Tag in WordPress
by c.bavota | Posted in Tutorials | 11 comments
Jul 31 2011
HTML5 has made it a lot easier to include certain elements. Especially videos, since you no longer have to embed them with all those parameters. Here’s a short code snippet that will add an HTML5 video shortcode to WordPress. Just include this code in your functions.php file and you are ready to go:
function html5_video($atts, $content = null) {
extract(shortcode_atts(array(
"src" => '',
"width" => '',
"height" => ''
), $atts));
return '<video src="'.$src.'" width="'.$width.'" height="'.$height.'" controls autobuffer>';
}
add_shortcode('video5', 'html5_video');
Now you can use the following shortcode in your post:
[video5 src="http://your-site/videos/your-video.mp4" width="720" height="480"]
You can read more on which browsers support which formats at http://en.wikipedia.org/wiki/HTML5_video.



Hi admin, i always [embed]youtube link[/embed] in order to insert video. So, what’s difference from your shortcode.
Thk !
The shortcode above is for self-hosted videos or direct links to the video file. It relies on the browser’s HTML5 video player to display the video.
I hope you don’t think my question is stupid, but do all browser’s now have HTML5 capability?
Really useful HTML5 codes………… newbies in WP will gain a lot of info from this post!
Yes. The best of the bunch are Firefox, Chrome and Safari.
Exactly what I needed – many thanks. Have bookmarked your site for future reference.
Hi,
Thanks for this code. I have been using html5 for my blog because I need to add a video and I even installed lots of plugin for it t be working.
Regards,
Howard
how could I modify snippet this to extract multiple fallback video SRCs, if specified, from the shortcode? To output something like this:
HTML5 will completely change the web.I’m also using it for some of my websites.