Written by
Filed in Design

Tags: , ,

January 28, 2011 Using shortcodes to embed Vimeo videos

Smashing Magazine has a great post about shortcodes which inspired this little tidbit from me.

The Problem

One of the most frustrating things about the WordPress visual editor is that once you switch to HTML mode and paste in iframe content, then switch back to visual editor and update/publish the post, WordPress removes that iframe you just added. Sure you can publish the post in HTML mode, and you can disable the Visual editor in your user options, but what if your client needs to edit the post later on using the Visual editor? WordPress shortcodes are the answer.

How to use shortcodes

Step 1: The PHP

Open up your themes function.php file. And paste in the following code:

<?php
	//  Define shortcode to embed Vimeo Videos
	function myVideoEmbed($atts, $content = null) {
	    extract(shortcode_atts(array(
	        "id" => '',
	        "width" => '684',
	        "height" => '385'
	    ), $atts));
    return '<iframe src="http://player.vimeo.com/video/'.$id.'?title=0&byline=0&portrait=0&color=ffffff" width="'.$width.'" height="'.$height.'" frameborder="0"></iframe>';
}
add_shortcode("vid", "myVideoEmbed");
?>

I won’t go into extreme detail explaining all the inner workings of the WordPress functions here but basically we are defining a custom function named “myVideoEmbed”, and passing it parameters for id (of the vimeo video) and width/height of the embedded iframe/video.

Notice that we’ve set default values of 684 for the width and 385 for the height of the video, however when calling the shortcode in your post, you or your client can override these settings per video. Our custom function simply outputs the iframe HTML where ever we call the shortcode within our post.

Also notice the last line of code and the WordPress function “add_shortcode”. It has two parameters: “vid” and “myVideoEmbed”. Obviously we know that the second parameter is the custom function we just wrote, and the first parameter defines what our shortcode will be and its name is at your discretion.

Step 2: The Shortcode

So lets talk about how we use this shortcode.

The “id” can be found from the Vimeo url used to play the video. In this case, 16373137 is the “id” from the url: http://www.vimeo.com/16373137. So just upload a video to vimeo, and find the id from the url. Use that id in your shortcode and voila.

Our shortcode can accept three parameters: id (of the video defined by vimeo) and width/height of the video. So let’s say you have videos that are different sizes and the default that we defined in our functions.php is not appropriate for a given video. Our shortcode can handle it.

Here is the example without defining the width or height in our shortcode.  Notice the video is displayed at the default size we defined in our functions.php.

[vid id="16373137"]

Now an example where we define a custom width and height.

[vid id="16373137" width="342" height="192"]

Go forth!

The video is now displayed at the size we defined.  Simple, easy and effective.  Now your clients can embed videos through vimeo and maintain the use of the visual editor.  If you’ve got some other great uses for shortcodes, please let us know in the comment section below!

  • http://cssorigins.com Hunter

    im lazy i would just create a metabox for it if it was for a client., that way they can easily see where/how to add a video Although they would lose functionality as to where to put the video without additional code.

    and hmmmm arent we all glad that Vimeo now supports an html5 iframe style embed, that way it now works with iOS and others

    • John

      A metabox is certainly another way to do it, but like you said they lose the ability to mix that video in with their content where ever they would like to.