JQuery Fancybox and YouTube embed
I am trying to open a YouTube embed in Fancybox. I based it on the code on the Fancybox page - http://fancyapps.com/fancybox
Here's 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 every time I click on the link it just opens a full screen YouTube video in the same window ... not in Fancybox
I make sure my Js files are loaded and they are there, also I am not getting errors in the FF console.
Can anyone see what I am doing wrong?
source to share
If you are using youtube format embed
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 a custom 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>
notice this class is complementary to the existing class .fancybox
(yes, dotted format is ok)
2). Add a custom attribute to your link data-fancybox-type="iframe"
, for example:
<a class="various fancybox" data-fancybox-type="iframe" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>
3). Add type: "iframe"
to your custom initialization script like:
$(".fancybox").fancybox({
type: "iframe",
// other API options
})
Choose any of these options (you don't need to install everything)
source to share