How to display Youtube videos in a jQuery lightbox (WordPress)?

3 Views

I tried lightbox-plus, fancybox, etc…

But I couldn’t figure how to do it.

Read More

Those videos are images posts with a link containing a Youtube video: 

<p><a href="http://www.youtube.com/watch?v=zUN826BdvV4">
<img class="alignnone size-thumbnail wp-image-40" 
title="Screenshot" src="http://localhost/custom-post-type/
wp-content/uploads/2011/01/Screenshot2-150x150.png" 
alt="" width="150" height="150" /></a></p>

Fancybox for WordPress, for example, let me add a lightbox to images, but if the image links to a Youtube video it doesn’t work.

Any suggestions?

Post Views: 3

Related posts

Leave a Reply

3 comments

  2. Have you seen the FancyBox Blog? There is an example there of a YouTube video in a Fancybox:

    http://fancybox.net/blog

    Script tag to import FancyBox:

    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>

    JavaScript/Jquery to bind click event:

    $("#tip4").click(function() {
$.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'     : 680,
        'height'        : 495,
        'href'          : this.href.replace(new RegExp("watch\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
             'wmode'        : 'transparent',
            'allowfullscreen'   : 'true'
        }
    });

return false;
});

    HTML:

    <a id="tip4" title="'Zombieland' Trailer"
    href="http://www.youtube.com/watch?v=071KqJu7WVo&amp;feature=player_embedded#at=41">
        Try now
</a>

  3. I figured out how:

    <div style="text-align: center;"><a class="fancybox" href="#welcomevideo"><img src="http://www.howieolson.com/wp-content/uploads/2010/04/howie-olsen-welcome-video.jpg" width="251px" height="188px" alt="Welcome To High Output"></a></div>

<div style="display:none" id="welcomevideo">
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object>
</div>

    It seems like it works with links with inline content attached to it.

    (Please let me know if there’s a better solution to this).