jQuery Fancybox and YouTube embeds

Question

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?

Envious

Answer 1

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)

Isa

brilliant thanks! I actually remember seeing the fancybox.iframe on the demo page... just I had no idea that actually affected how it worked! I'll go with the data-fancybox-type attribute though I think – Envious

Very well explained! Tks! – Malediction