为什么我的fancybox 没有在$('.selector').click() 上打开？

Question

I have a page of styled links that I broke into sections using jQuery.

1. Using jQuery .internal causes the page to navigate to the specified target specified by the href attribute of the link inside the div the user clicked on.
2. .external does the same thing as .internal except it opens in a new tab.
3. .video should simply cause the div clicked to play the video specified by the link in a fancybox but it does not. Nor does it report an error in the console.

Here is my code for the fancybox:

HTML

<div id="fentanylVid" class="col-sm-3 dept video" data-department="fentanyl the real deal">
    <div class="box listed-left animated-content move_right animate clearfix">
        <div class="box-text">
            <h4><a data-fancybox="" href="https://youtu.be/Tt0dFCuwkfQ?rel=0">Fentanyl: The Real Deal (Video)</a></h4>
        </div>
    </div>
</div>    

jQuery

$('.video').click(function(){
    $().fancybox({
        selector : '.video'
    });
});

I also have the two resources in the header of my page

Answer 1

You can either initialize the fancybox like this

$('.video').fancybox({
    selector : '.video'
});

or as @Taplar said

$('.video').click(function(){
    $.fancybox.open(this)
});

Answer 2

A bit explaining what your code does:

$('.video').click(function(){ // <- Here you are attaching your click event on selected items
    // So, when user clicks, this happens:
    $().fancybox({ // Here you are telling fancybox to attach click event ..
        selector : '.video'  // .. on this selector
    });
});

So, basically you have done too much work and all you have to do is to remove your own click event and it should work fine. Or you can use API to start fancybox programmatically, like in the other answer.