X

How To Create a Shortcode for HTML5 Video in Posts and Pages

Snippets by IsItWP

Are you looking for a way to create a shortcode for HTML5 video? This snippet will create a new shortcode for adding HTML5 video to your posts and pages.

  1. Add this code to your theme’s functions.php file or in a site-specific plugin.
  2. 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');
    
  3. Then, add this shortcode to your post or page and configure it as needed. Remember to replace the src attribute value.
  4. [video5 src="http://your-site/videos/your-video.mp4" width="720" height="480"]
    

Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.

If you liked this code snippet, please consider checking out our other articles on the site like: 12 Best WordPress Podcast Plugins Compared (Free & Premium).

Comments  Leave a Reply

  1. How can there be multiple video files – same exact video but different sizes/resolutions for different screen sizes?

    1.  with this sample you really can’t do something like that, if you want to do something more advanced with wordpress and video I would look into http://jplayer.org/

  2. Below, not Bellow. Delete this comment once fixed. Thanks for another great snippet.

    1. Cheers Cliff, fixed the typo. Glad you like the snippet.

  3. this is a very nice snippet sir.

    1. Thanks glad that you like it.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!
[63% OFF Today!]
[63% OFF Today!]
[60% OFF Today!]
[60% OFF Today!]
[50% OFF TODAY!]
[50% OFF TODAY!]
[63% OFF Today!]
[63% OFF Today!]
[60% OFF Today!]
[60% OFF Today!]
[50% OFF Today!]
[50% OFF Today!]