Youtube fancybox не будет работать

Question

В настоящее время я пытаюсь сделать необычную коробку с видео на YouTube. В настоящее время у меня есть еще несколько fancyboxes на странице, но, кажется, не получается заставить этот fancybox работать, другие fancyboxes имеют класс fancybox-iframe или fancybox в зависимости от содержимого, если это поможет.

Ниже приведена ссылка, к которой я хочу добавить fancybox.

<a href="http://youtu.be/krlR2-YGk4sI" target="_blank"><span class="cta floatL">through the eyes of a bigsmile advert</span><span class="playIco floatL"></span></a>

Это тот самый фрейм, который я кладу в свой модный ящик. Может кто-нибудь, пожалуйста, помогите мне?

<iframe width="420" height="345" src="http://www.youtube.com/embed/krlR2-YGk4sI?autoplay=1" frameborder="0" allowfullscreen></iframe>

Спасибо

Answer 1

Вам не нужно размещать видео внутри iframe, Единственный HTML-файл, который вам нужен, - это ссылка на ваше видео, например:

<a class="fancybox" href="http://youtu.be/krlR2-YGk4sI" target="_blank">Open youtube</a>

Обратите внимание на класс fancybox в <a> тег (вы можете использовать любое другое имя класса, просто убедитесь, что вы привязали правильный селектор к fancybox)

Затем включите помощник медиа fancybox на своей странице:

<script type="text/javascript" src="path/to/fancybox/files/helpers/jquery.fancybox-media.js"></script>

... и добавить helpers опция Media API для вашего собственного скрипта, как:

$(document).ready(function () {
    $('.fancybox').fancybox({
        helpers: {
            media: {}
        }
    });
});

Смотрите JSFIDDLE