fancyBox - YouTube Video Won't Display

Question

Here is my HTML:

<a class="various fancybox.iframe" href="http://www.youtube.com/watch?v=PzBk4-awY40"><div id="video_nav"><h3 class="nav_text">Video</h3></div></a>

And jQuery

$(document).ready(function() {
$(".various").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'elastic',
    closeEffect : 'none'
});
});

I modified my code from a demo using the most recent version of fancyBox, and a video will not display unless I use the video used in the demo

Answer 1

The issue is that this URL format

http://www.youtube.com/watch?v=PzBk4-awY40

...won't work with iframe mode (you are setting fancybox.iframe class in your link).

You may rather use youtube's embedded format, which works on devices that don't support flash

http://www.youtube.com/embed/PzBk4-awY40

Additionally, you can add the ?autoplay=1 trailing parameter if you want your videos to start right after fancybox is opened

JSFIDDLE

NOTES:

• If you really want to stick to the /watch?v= URL format (the links are set by the user or dynamically) then remove the class fancybox.iframe from your link and use the fancybox media helper instead. Check http://fancyapps.com/fancybox/#examples ==> extended functionality for more.
• to avoid a known iframe issue (mostly with IE) I would advise you to set iframe preload to false, check https://stackoverflow.com/a/16595607/1055987 for more