Triggering FancyBox with click() event

Question

I am trying to trigger a FancyBox overlay when a DIV is clicked.

(I have seen several posts about triggering FancyBox from an Anchor click, but none address this. Also, I can't use an Anchor instead of a DIV, because my clickable overlay will contain several block elements, and it is not kosher to have an inline element spanning block elements).

This is a simplified version of my code. (I will attach a JSfiddle at the end with the FULL code):

<div id="eAcon6LPgHo" class="youtube_box">
    <img src="http://img.youtube.com/vi/eAcon6LPgHo/0.jpg"/>
    <span class="caption">
        <h3>Dan Bull Raps Fast</h3>
    </span><!--/.caption-->
</div><!--/.youtube_box-->

.

$( document ).ready(function() {
    $( ".youtube_box" ).click(function() {
        var YouTubeID = this.id;
        // alert( "clicked: " + YouTubeID );
        $.fancybox({
            href : 'http://www.youtube.com/embed/' + YouTubeID + '?autoplay=1'
        });
    });
});

When my DIV is clicked, the YouTube ID is retrieved from the element ID, (I have testing this with the commented out alert). However, FancyBox is never triggered, nor do I get any error messages.

I have set-up a full JSfiddle with my code here: http://jsfiddle.net/5pd6egbo/

Please help!

Answer 1

Specifying the type as iframe seems to make it work.

$( document ).ready(function() {
   $( ".youtube_box" ).click(function() {
      var YouTubeID = this.id;

      $.fancybox({
          href : 'https://www.youtube.com/embed/' + YouTubeID + '?autoplay=1'
      }, {
          type: 'iframe'
      });
   });
}); 

See this Fiddle.