jQuery Fancybox and YouTube embeds

embed, fancybox, fancybox-2, jquery, youtube

Solution

If you are using youtube's `embed` format like :

<a class="various fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>

... then you have three options :

1). Add the special class `fancybox.iframe` to your link like

<a class="various fancybox fancybox.iframe" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>

JSFIDDLE

notice this class is additional to the existing `.fancybox` class (yes, the format with dot is OK)

2). Add the special `data-fancybox-type="iframe"` attribute to your link like :

<a class="various fancybox" data-fancybox-type="iframe" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>

JSFIDDLE

3). Add `type: "iframe"` to your custom initialization script like :

$(".fancybox").fancybox({
    type: "iframe",
    // other API options
})

JSFIDDLE

Choose any of those options (you don't need to set all)

Problem

I'm trying to get a YouTube embed to open up in a Fancybox. I've based it on the code on the Fancybox page — http://fancyapps.com/fancybox Here is what I have: ``` <a class="various fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a> ``` And then in `call.js` ``` $(document).ready(function() { $(".various").fancybox({ maxWidth : 800, maxHeight : 600, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); }) ``` But each time I click the link, it just opens up the YouTube video full-screen in the same window... not in a Fancybox I've check to make sure my Js files are loading and they are, also I'm getting no errors in the FF console. Can anyone see what I'm doing wrong?

Original source