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?
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>
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>
3). Add type: "iframe"
to your custom initialization script like :
$(".fancybox").fancybox({
type: "iframe",
// other API options
})
Choose any of those options (you don't need to set all)