Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I use the following to add in a post a YouTube thumbnail and display the video in a fancybox:

<div><a class="fancybox" href="#video2">
<img src="http://img.youtube.com/vi/dm36W5NTPag/0.jpg" alt="Welcome To High Output" width="220px" height="120px" /></a></div>


<div id="video2" style="display: none;">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/dm36W5NTPag" frameborder="0" 
allowFullScreen></iframe></div>

Basically the shortcode must have one fields to enter the ID of the video in the thumbnail, the link to the video, the link of the first div, and the id of the second div.

http://img.youtube.com/vi/(HERE)/0.jpg and http://img.youtube.com/vi/(HERE)/0.jpg

<a class="fancybox" href="#(HERE)"> and <div id="(HERE)" style="display: none;">

So the shortcode should look like:

[youtube VIDEO ID:(Enter ID)]

Does anybody know how to do this?

share|improve this question
1  
it's quite simple, but why different IDs? you could have the div use the same id as the video, maybe add a prefix or something... –  onetrickpony Jan 25 '11 at 12:56
    
@One Trick Pony Didn't thought about that. –  janoChen Jan 25 '11 at 13:01

1 Answer 1

up vote 2 down vote accepted
add_shortcode('youtube', 'youtube_shortcode'); 

function youtube_shortcode($atts){  

  if(!isset($atts[0])) return;
  $id = strip_tags($atts[0]);
  ob_start();
  ?>

<div><a class="fancybox" href="#video_<?php echo $id; ?>">
<img src="http://img.youtube.com/vi/<?php echo $id; ?>/0.jpg" alt="Welcome To High Output" width="220px" height="120px" /></a></div>


<div id="video_<?php echo $id; ?>" style="display: none;">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/<?php echo $id; ?>" frameborder="0" 
allowFullScreen></iframe></div>

  <?php
  return ob_get_clean();
}

use it like: [youtube "dm36W5NTPag"]

share|improve this answer
    
Thanks but it says: Parse error: syntax error, unexpected T_RETURN in /home/alex/www/brianfunshine.com2/wp-content/themes/options/functions.php on line 7 I think there is something wrong here: if(!isset($atts[0]) return; –  janoChen Jan 25 '11 at 13:18
    
yea, forgot to close a bracket :) –  onetrickpony Jan 25 '11 at 13:21
    
Thanks it worked perfectly! –  janoChen Jan 25 '11 at 13:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.