Mike K. Mike K. - 1 year ago 108
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() {
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 Source

The issue is that this URL format


...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


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



  • 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