jQuery Fancybox and YouTube embeds

pealo86 picture pealo86 · Nov 28, 2014 · Viewed 30.9k times · Source

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?

Answer

JFK picture JFK · Nov 28, 2014

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)