Video Shortcodes

Yesterday, Elizabeth talked about adding videos to your blog. Here let’s dive a bit deeper and look at how to use shortcodes to embed videos. On WordPress.com, you can use these handy bits of code to do cool things on your site with little effort, like embed files and create objects.

WordPress.com has a number of video shortcodes you can use to embed videos from a variety of sites like YouTube, Vimeo, Hulu, and Flickr. As Elizabeth mentioned, you can embed a video by placing its URL in your visual editor. But using the shortcode method lets you customize the video in various ways, from controlling its width and height to specifying a start and end time for a clip — it depends on the shortcode and the video service.

So, let’s take a look at the shortcodes for some popular video services on the web:

YouTube

In general, you can create a video shortcode by placing the relevant bit of text (for example, youtube or vimeo), the = sign, and the video URL — all inside left and right brackets.

So, this shortcode . . .

[youtube=http://www.youtube.com/watch?v=JaNH56Vpg-A]

. . . will display this video:

If you don’t want the video to be too prominent on your post or page, you can control the size of the video by specifying the width and height by adding &w= and/or &h= to the shortcode. So, this shortcode . . .

[youtube=http://www.youtube.com/watch?v=JaNH56Vpg-A&w=200&h=100]

. . . will display this (tiny!) video:

If you’re a travel blogger writing about your recent mosque visits in Istanbul, you could include a clip you’ve found of an interior tour of the Hagia Sophia. Or, if you’re working on a post about the street food of Turkey, you can embed an interview you’ve come upon with a friendly kebab vendor in Sultanahmet. While videos may not be appropriate for all of your posts, if selected carefully, they can add a new dimension to your blog.

You know those related YouTube videos that appear when you’re watching clips? You can also use shortcode to disable them. Just add &rel=0 to the end of the shortcode, like this:

[youtube=http://www.youtube.com/watch?v=JaNH56Vpg-A&rel=0]

For more details on YouTube embeds, check the support page.

Vimeo

Embedding a video from Vimeo with shortcode is similar — you can specify the width and height as well. However, all you need for the shortcode is the ID of a Vimeo video: the string of numbers within the video’s URL. For example, for this video URL . . .

Vimeo URL

. . . simply insert the number ID in the shortcode, like so: [vimeo 24879869]

Then, to change the width and height to 500 × 280, for example, update the shortcode to:

[vimeo 24879869 w=500&h=280]

On Vimeo, there’s an active and creative community — you’ll find everything from animation shorts to experimental documentaries by professionals and hobbyists. If you’re an arts and entertainment blogger looking for independent and community artwork to critique, try browsing Vimeo’s Staff Picks section for interesting curated content to inspire your posts. Or maybe you’re looking for visuals to complement your spring poem or latest stream-of-consciousness post? Perhaps you’ll find an appropriate video in the nature category for your poem or the perfect experimental clip to accompany your surrealist piece.

For more details on Vimeo embeds, read the support page.

Hulu

Here are examples of shortcode to embed a Hulu video to your blog:

[hulu http://www.hulu.com/watch/369061]

or simply

[hulu id=369061]

In addition to specifying the size, you can do other cool things, such as control the start and end times in a clip, which is handy when you want to share a particular scene or fast-forward to a certain part of a video, like a certain award in the recent Oscars ceremony or the best joke in a standup performance. Let’s say you only want to play 15 seconds of a 22-minute clip — just use start_time and end_time in your shortcode, like this:

[hulu http://www.hulu.com/watch/369061 start_time=50 end_time=65]

Note the start_time and end_time are measured in seconds from the start of the video.

In addition, you can set the specific frame you’d like to display before a Hulu video plays. To do this, add thumbnail_frame=XX to your shortcode to select the frame of the clip you’d like to display, replacing XX with the specific frame (again, this amount is measured in seconds). So, this shortcode . . .

[hulu http://www.hulu.com/watch/369061 thumbnail_frame=48]

. . . sets this frame:

It’s a helpful tool to control the “frozen” image on the screen within your post.

For more details on embedding Hulu videos, check the support page.

Flickr

Finally, to embed a Flickr video, insert shortcode in either of these formats:

[flickr video=http://www.flickr.com/photos/chaddles/2402990826]

or simply

[flickr video=2402990826]

Either format will display a Flickr video like this:

To specify the width and height, add w=XX (width) and h=XX (height), replacing XX with the dimensions you want. So, [flickr video=2402990826 w=200 h=150] will embed a smaller video in 200 x 150 pixels.

For a cleaner look, you can also remove the text information shown at the beginning of a Flickr video, which is handy. Just add show_info=no to the shortcode.

For more details on Flickr, check the support page.

Troubleshooting

Confirm your video URLs are not hyperlinked. (If you’re not sure, check the color of the video URL — if it’s displayed in your theme’s link color, it’s hyperlinked. To unlink, select the whole URL and click the “Unlink” icon in the toolbar.)
Make sure to place a URL or shortcode on its own line. There should be no character or white space before or after the URL or shortcode.
Check the setting of the video you’re trying to embed — if it’s private or set for restricted viewing, you can’t display it.

These shortcodes should get you started — check our full list of video shortcodes for more, including steps for Blip.tv, Dailymotion, and TED Talks.