Advertisement
  1. Code
  2. WordPress
Code

Quick Tip: Your Own Video Shortcode

by
Languages:

You probably use a video embedding plugin or you just use the embed codes of video sites. But there's a third, easier way to embed videos in your WordPress site: a simple (but useful) video shortcode.


Why Should I Use a Video Shortcode?

  • Because video embedding plugins are just another little burden for your blog. They take some space on your disk (granted, not more than 1MB), they always query your database for their options and you need to learn how to use the plugins.
  • Because embedding the codes of the video sites can be corrupted – especially when you switch between the WYSIWYG editor and the HTML editor.
  • And most importantly: Because shortcodes are awesome! They're easy to use, they can have the functionality of many plugins and their code doesn't break in your posts!

Exploring the Video Sites

We're going to work with 7 video hosting sites:

  1. YouTube (obviously!)
  2. Vimeo
  3. Dailymotion
  4. Yahoo! Screen
  5. Blip.tv
  6. Veoh
  7. Viddler

Let's see what their embed codes look like:

YouTube

The default embed code looks like this:

But there's one option, the "privacy-enhanced mode" which adds "-nocookie" to the domain and we're going to use it in our shortcode.

Vimeo

Simple and elegant. That's why people love Vimeo.

Dailymotion

I think adding a link below the embed code is just not cool, so we're not adding that to our shortcode.

Yahoo! Screen

The embed code is a little weird on Yahoo! Screen but I found a way to shorten it which will be easier to use in our shortcode.

Blip.tv

This is a hard one – this doesn't have the video ID (from the video's URL) in the embed code. But thanks to some research, I figured out how to use the ID! :)

Veoh

Ah, the <object> tag... Don't worry, we're not going to use it!

Viddler

That's all. Now, let's get to the fun part!


The Shortcode: [vid]

We'll create 4 attributes for this shortcode – the name of the site, the ID of the video and the width and the height of the video. You can set some default values for the attributes:

Then comes the part where the function generates the $src variable which generates the src attribute for the iframe:

And of course, we return the output. Here's the full code of our brand new video shortcode:

Tip within the quick tip: Take note that the iframe has two CSS classes: vid and iframe-$site (e.g. iframe-youtube). You should add vid {border:0;} to your CSS file since we didn't define the frameborder attribute in our iframe tag.


Usage Examples

The default usage is simple enough:

[vid site="youtube" id="dQw4w9WgXcQ" w="600" h="340"]

But to make it even simpler, we set default values for site, w and h. So, if you want to embed a YouTube video, you can just use it like this:

[vid id="dQw4w9WgXcQ"]

You should change the width and the height to match your blog. Also, if you use Vimeo more than YouTube, you can change the default site value to "vimeo".

That's it! Add this to your functions.php file and you can start using the shortcode. Enjoy!

Update: We've added a usage example section to the article now to make things clearer.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.