Search code examples
jqueryyoutubefancybox

Open YouTube video in Fancybox jQuery


Can I open YouTube video in Fancybox.

I have a list of YouTube videos links, for ex:

<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>

and Fancybox :

$("a.more").fancybox({
                    'titleShow'     : false,
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic'
        });

I don't want to create for each video new embed object.

Is there some plug in, or a other way to do that ?


Solution

  • THIS IS BROKEN, SEE EDIT

    <script type="text/javascript">
    $("a.more").fancybox({
                        'titleShow'     : false,
                        'transitionIn'  : 'elastic',
                        'transitionOut' : 'elastic',
                'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                'type'      : 'swf',
                'swf'       : {'wmode':'transparent','allowfullscreen':'true'}
            });
    </script>
    

    This way if the user javascript is enabled it opens a fancybox with the youtube embed video, if javascript is disabled it opens the video's youtube page. If you want you can add

    target="_blank"
    

    to each of your links, it won't validate on most doctypes, but it will open the link in a new window if fancybox doesn't pick it up.

    EDIT

    this, above, isn't referenced correctly, so the code won't find href under this. You have to call it like this:

    $("a.more").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;
    });
    

    as covered at http://fancybox.net/blog #4, replicated above