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:
- YouTube (obviously!)
- Vimeo
- Dailymotion
- Yahoo! Screen
- Blip.tv
- Veoh
- Viddler
Let's see what their embed codes look like:
YouTube
The default embed code looks like this:
/* Original video: youtube.com/watch?v=dQw4w9WgXcQ */ <iframe width="420" height="315" src="http://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
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
/* Original video: vimeo.com/36804448 */ <iframe src="http://player.vimeo.com/video/36804448" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
Simple and elegant. That's why people love Vimeo.
Dailymotion
/* Original video: dailymotion.com/video/xhwpbg_bridgestone-15-sec-spot_auto */ <iframe frameborder="0" width="480" height="360" src="http://www.dailymotion.com/embed/video/xhwpbg"></iframe><br /><a href="http://www.dailymotion.com/video/xhwpbg_bridgestone-15-sec-spot_auto" target="_blank">BridgeStone 15 Sec spot</a> <i>by <a href="http://www.dailymotion.com/DailymotionUSA" target="_blank">DailymotionUSA</a></i>
I think adding a link below the embed code is just not cool, so we're not adding that to our shortcode.
Yahoo! Screen
/* Original video: screen.yahoo.com/mysterious-death-of-500-fish-in-german-lake-blamed-on-urinating-swimmers-29322943.html */ <div><iframe frameborder="0" width="576" height="324" src="http://d.yimg.com/nl/vyc/site/player.html#shareUrl=http%3A%2F%2Fscreen.yahoo.com%2Fmysterious-death-of-500-fish-in-german-lake-blamed-on-urinating-swimmers-29322943.html&vid=29322943&browseCarouselUI=hide&repeat=0&startScreenCarouselUI=hide"></iframe></div>
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
/* Original video: blip.tv/mister-glasses/episode-7-5600357 */ <iframe src="http://blip.tv/play/AYLV6UkC.html?p=1" width="780" height="438" frameborder="0" allowfullscreen></iframe><embed type="application/x-shockwave-flash" src="http://a.blip.tv/api.swf#AYLV6UkC" style="display:none"></embed>
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
/* Original video: veoh.com/watch/v27458670er62wkCt */ <object width="410" height="341" id="veohFlashPlayer" name="veohFlashPlayer"><param name="movie" value="http://www.veoh.com/swf/webplayer/WebPlayer.swf?version=AFrontend.5.7.0.1355&permalinkId=v27458670er62wkCt&player=videodetailsembedded&videoAutoPlay=0&id=anonymous"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.veoh.com/swf/webplayer/WebPlayer.swf?version=AFrontend.5.7.0.1355&permalinkId=v27458670er62wkCt&player=videodetailsembedded&videoAutoPlay=0&id=anonymous" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="410" height="341" id="veohFlashPlayerEmbed" name="veohFlashPlayerEmbed"></embed></object><br /><font size="1">Watch <a href="http://www.veoh.com/watch/v27458670er62wkCt">Intense Cat</a> in <a href="http://www.veoh.com/browse/videos/category/animals">Animals</a> | View More <a href="http://www.veoh.com">Free Videos Online at Veoh.com</a></font>
Ah, the <object> tag... Don't worry, we're not going to use it!
Viddler
/* Original video: viddler.com/v/978c9ba2 */ <iframe id="viddler-978c9ba2" src="//www.viddler.com/embed/978c9ba2/?f=1&autoplay=0&player=full&loop=false&nologo=false&hd=false" width="437" height="315" frameborder="0" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
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:
function vid_sc($atts, $content=null) {
extract(
shortcode_atts(array(
'site' => 'youtube',
'id' => '',
'w' => '400',
'h' => '250'
), $atts)
);
}
add_shortcode('vid','vid_sc');
Then comes the part where the function generates the $src variable which generates the src attribute for the iframe:
// YouTube with "privacy-enhanced mode":
if ( $site == "youtube" ) {
$src = 'http://www.youtube-nocookie.com/embed/'.$id;
}
// Vimeo:
else if ( $site == "vimeo" ) {
$src = 'http://player.vimeo.com/video/'.$id;
}
// Dailymotion:
else if ( $site == "dailymotion" ) {
$src = 'http://www.dailymotion.com/embed/video/'.$id;
}
// Yahoo! Screen with some cuts in the URI:
else if ( $site == "yahoo" ) {
$src = 'http://d.yimg.com/nl/vyc/site/player.html#vid='.$id;
}
// Blip.tv with some "hacks" in the URI:
else if ( $site == "bliptv" ) {
$src = 'http://a.blip.tv/scripts/shoggplayer.html#file=http://blip.tv/rss/flash/'.$id;
}
// The Veoh URI has some hacks, too:
else if ( $site == "veoh" ) {
$src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay=0&permalinkId='.$id;
}
// Viddler:
else if ( $site == "viddler" ) {
$src = 'http://www.viddler.com/simple/'.$id;
}
And of course, we return the output. Here's the full code of our brand new video shortcode:
function vid_sc($atts, $content=null) {
extract(
shortcode_atts(array(
'site' => 'youtube',
'id' => '',
'w' => '600',
'h' => '370'
), $atts)
);
if ( $site == "youtube" ) { $src = 'http://www.youtube-nocookie.com/embed/'.$id; }
else if ( $site == "vimeo" ) { $src = 'http://player.vimeo.com/video/'.$id; }
else if ( $site == "dailymotion" ) { $src = 'http://www.dailymotion.com/embed/video/'.$id; }
else if ( $site == "yahoo" ) { $src = 'http://d.yimg.com/nl/vyc/site/player.html#vid='.$id; }
else if ( $site == "bliptv" ) { $src = 'http://a.blip.tv/scripts/shoggplayer.html#file=http://blip.tv/rss/flash/'.$id; }
else if ( $site == "veoh" ) { $src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay=0&permalinkId='.$id; }
else if ( $site == "viddler" ) { $src = 'http://www.viddler.com/simple/'.$id; }
if ( $id != '' ) {
return '<iframe width="'.$w.'" height="'.$h.'" src="'.$src.'" class="vid iframe-'.$site.'"></iframe>';
}
}
add_shortcode('vid','vid_sc');
Tip within the quick tip: Take note that the
iframehas two CSS classes:vidandiframe-$site(e.g.iframe-youtube). You should addvid {border:0;}to your CSS file since we didn't define theframeborderattribute in ouriframetag.
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.
Comments