Почему мой fancybox не открывается на $ ('. Selector'). Click ()?

Question

У меня есть страница с стилизованными ссылками, которые я разбил на разделы с помощью jQuery.

1. Использование jQuery .internal заставляет страницу переходить к указанной цели, указанной атрибутом href ссылки внутри div, по которому пользователь щелкнул.
2. .external делает то же самое, что и .internal, за исключением того, что он открывается в новой вкладке.
3. .video должен просто вызвать щелчок div для воспроизведения видео, указанного по ссылке вно это не так. Также он не сообщает об ошибке в консоли.

Вот мой код для 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'
    });
});

У меня также есть два ресурса в шапке моей страницы

Answer 1

Вы можете инициализировать fancybox, как это

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

или, как сказал @Taplar

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

Answer 2

Немного объясняя, что делает ваш код:

$('.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
    });
});

Итак, в основном вы проделали слишком много работы, и все, что вам нужно сделать, это удалить собственное событие click, и оно должно работать нормально. Или вы можете использовать API для запуска fancybox программно, как в другом ответе.