Mike K. Mike K. - 7 months ago 42
Javascript Question

fancyBox - YouTube Video Won't Display

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

JFK JFK
Answer

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 http://stackoverflow.com/a/16595607/1055987 for more