Menu

Video Shortcodes

Yesterday, Elizabeth talked about adding videos to your blog. Here let’s dive a bit deeper and look at how to…

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.

Show Comments

28 Comments

Comments are closed.

Close Comments

Comments

  1. Yes I liked but sorry this blog was too long, Under normal pressurized time I would have ignored. Try to keep your blogs shorter, rather divide the blogs into parts.

    Like

    1. Thanks for the feedback. I could have made this even loooooonger but focused on these four, and wanted to be clear here rather than direct people elsewhere, to the support site. Hopefully some of this was useful at least.

      Like

  2. Too long?? I get frustrated when I’m constantly directed elsewhere. Appreciated your specific illustrations/explanations of how to use video shortcode. I may now use more.

    Like

  3. Cheri, this is a fantastic blog post on using video short codes. It was just the right length. Not too long at all. It had all the necessary info. I wouldn’t use Vimeo so I simply scrolled past it and kept on reading. In the future, I’ll definitely play around with these.

    Like

  4. Thank you Cheri,
    I’m a fan of video and use them regularly on my blog. I love vimeo, Youtube and TED because they cover topics I enjoy and learn from. I uploaded my own video once and it was quite easy to do. I might try my hand at it again… :-)
    Eliz

    Like

      1. Hi myfemalepersuasion,
        I have WP videopress which is a video upgrade and can be purchased in your WP Admin store via your dashboard. Once you have that, there are clear instructions to help you upload videos you created. I’ve added the link to videopress below, and it has all the information you need. http://en.support.wordpress.com/videopress/
        Best wishes,
        Elizabeth

        Like

    1. I forgot that I’ve uploaded, via VideoPress, quite a few videos I shot. So I stand corrected I’ve done so more than once. I checked my blog and found my videos from the Social Good Conference… :-)
      Eliz

      Like

  5. Love it! Easy to follow instructions. Got our first Vimeo video on page now after switch from YT.
    Appreciate your help.

    Like

  6. I drop a leave a response when I like a article on a website or if I have something
    to valuable to contribute to the conversation.

    It is triggered by the sincerness displayed in the post I browsed.
    And after this post Video Shortcodes | The Daily Post.
    I was moved enough to post a thought :-P I actually do
    have a couple of questions for you if you don’t mind. Is it simply me or do some of these comments look like left by brain dead people? :-P And, if you are writing at additional sites, I would like to keep up with everything new you have to post. Could you list every one of all your community pages like your linkedin profile, Facebook page or twitter feed?

    Like