WordPress Video Shortcodes

The WordPress Codex article on shortcodes refers to them as macros. WordPress Shortcodes are the function inside the WordPress core that allows for adding video, audio, images as well as other fun features like Twitter Timelines and Google Maps without code in HTML, PHP, JavaScript, and other web programming languages. In addition to the shortcodes mentioned in the Codex article, WordPress Support has a complete list of available shortcodes for WordPress.com sites.

This tutorial focuses on the use and customization of the video shortcodes on WordPress.com sites.

Shortcodes are abbreviated code placed into using the square brackets [ ]. They may be added to the Visual or Text Editors.

Not all video shortcodes are alike. The shortcode needed is dependent where the video is being pulled from. Some shortcodes need the url of the video and some shortcodes only need the videos ID numbers from the host website.

In an effort to make things simple xxxx is substituted in place of a full url and zzzz in place of video ID’s for this example. You will need to supply the specifics.

Supported Video Shortcodes

  • Blip.tv videos: [blip.tv xxxx]
  • CNNMoney videos: [cnnmoney-video url=xxxx]
  • DailyMotion videos: [dailymotion id=zzzz]
  • Flickr videos:
    • [flickr video=xxxx]
    • [flickr video=zzzz]
  • Hulu videos:
    • [hulu xxxx]
    • [hulu id=zzzz]
  • TED Talks videos: [ted id=zzzz]
  • Twitch.tv videos: [twitchtv url="xxxx"]
  • Ustream.tv videos:
    • [ustream id="zzzz" live="1"] for live streams
    • [ustream id="zzzz"] for recorded videos
  • Vimeo videos:
    • [vimeo xxxx]
    • [vimeo zzzz]
  • Vine vidoes: [vine url="xxxx"]
  • VideoPress videos: [wpvideo zzzz]
  • YouTube videos: [youtube=xxxx]
  • The Internet Archive videos: [archiveorg id=zzzz]

It is important to note whether or not the shortcode requires quotation marks around the URL or the ID.

Step by Step Directions for YouTube

Many of these steps are similar for all the video shortcodes but please refer to the specific information regarding the exact shortcode you may be using.

Let’s go through this process step-by-step with a YouTube video and its shortcode. Please note that YouTube video links may be pasted right into the Visual or Text editor and they will automatically convert into the necessary code when the web page is generated to display the video player.

  1. Locate the video you wish to share.
    Screen capture of YouTube showing the video "Locked" displaying the full URL.
  2. Note the URL and the ID (the highlighted portion of the URL)
    Screen capture of  YouTube highlining the video ID in URL
  3. In the WordPress editor, place your cursor in the location you want you video to appear and ensure it is on its own line between paragraphs.
    WordPress text editor showing an arrow on the text editor button and an arrow displaying the current location of the cursor
  4. Using the shortcode square brackets write in
    • [youtube=9Tm7YQ6Awy4]
    • Alternatively you can use the full URL for YouTube [youtube=http://www.youtube.com/watch?v=9Tm7YQ6Awy4]

Your video will now appear within your post.

This video is using the default shortcode [youtube=https://www.youtube.com/watch?v=9Tm7YQ6Awy4]

Additional Modifications to the Video Shortcodes

Many of the shortcodes have additional modifiers, or parameters, you can placed in them to adjusting aspect of the final video such as the size, appearance, related videos and more. WordPress Support shortcodes has a list you can use to find the specific modifiers for the shortcode you are using.

Video Height and Width

To control the width or height we only need to add a “&” and the factors we want to change.

  • To control just the width add, “w=x” in pixels
    [youtube=https://www.youtube.com/watch?v=9Tm7YQ6Awy4&w=120]
  • To control the height and width add “w=x&h=x”
    [youtube=https://www.youtube.com/watch?v=9Tm7YQ6Awy4&w=120&h=160]

Other Video Features

  • To not show other videos, add “&rel=0”
    [youtube=https://www.youtube.com/watch?v=9Tm7YQ6Awy4&rel=0]
  • To use a custom starting point add “start=xx” in seconds
    [youtube=https://www.youtube.com/watch?v=9Tm7YQ6Awy4&start=55&]
  • To use a custom end point add “end=xx” again in seconds
    [youtube=https://www.youtube.com/watch?v=9Tm7YQ6Awy4&start=25&end=35]

All of these options can be used together to really tailor the video to your site for example.
[youtube=https://www.youtube.com/watch?v=9Tm7YQ6Awy4&rel=0&start=5&end=10&w=240&h=135] changes the video to 140px wide by 135px high that starts at 5 seconds in and stops at 10 seconds and does not show related videos. here is an example.

Add Videos in WordPress Widgets

All of these shortcodes can be used inside the Text Widget so you can place a video into the sidebar or footer on you site as well. more detailed information.

Videos can also be placed in comments. Clark WP contributor David Larson wrote an article on How to post a picture and video in a comment on WordPress.

Additional Information on WordPress Shortcodes

Advertisements

One thought on “WordPress Video Shortcodes”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s