Youtube fancybox will not work

Question

I am currently trying to make a fancybox with a youtube video inside it. I currently have a couple more fancyboxes on the page but can not seem to get this fancybox to work,the other fancyboxes have the class of fancybox-iframe or fancybox depending on the content if this is any help.

Below is the link that I want to add fancybox to.

<a href="http://youtu.be/krlR2-YGk4sI" target="_blank"><span class="cta floatL">through the eyes of a bigsmile advert</span><span class="playIco floatL"></span></a>

This is the iframe that I am putting into my fancybox. Can somebody please help me?

<iframe width="420" height="345" src="http://www.youtube.com/embed/krlR2-YGk4sI?autoplay=1" frameborder="0" allowfullscreen></iframe>

Thanks

Answer 1

You don't need to place your video inside an iframe. The only html you need is the link to your video like :

<a class="fancybox" href="http://youtu.be/krlR2-YGk4sI" target="_blank">Open youtube</a>

Notice the class fancybox in the <a> tag (you can use any other class name, just make sure you bind the correct selector to fancybox)

Then include the fancybox media helper in your page :

<script type="text/javascript" src="path/to/fancybox/files/helpers/jquery.fancybox-media.js"></script>

... and add the helpers media API option to your custom script like :

$(document).ready(function () {
    $('.fancybox').fancybox({
        helpers: {
            media: {}
        }
    });
});

See JSFIDDLE