JW Player 7 with FancyBox 3 integration

I've been trying for the most of the afternoon but just can't get this to work. I'm trying to get JW PLayer v7 to work with FancyBox 3.

Code so far.. The fancybox works in terms of the overlay but the video does not show

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link  href="jquery.fancybox.css" rel="stylesheet">
<script src="jquery.fancybox.js"></script>
<script src="jwplayer-7.9.3.js"></script>
<script>jwplayer.key="key-in-here=="</script>

</head>

<body>

<a class="jwVideo" href="https://path-to-file.mp4">Preview</a>


<script>
$(function() { 

 $(".jwVideo").click(function(event) { //select class attribute jwVideo assigned to a tag

    $.fancybox.open({
        content: '<div id="video_container">Loading the player ...</div>',
        afterShow: function(){ 
            var playerInstance = jwplayer("video_container");
            playerInstance.setup({
               file: "http://path-to-s3-file.mp4"
            });
        }
    });

    event.preventDefault(); =
});

});
</script>

Would super appreciate some help. Thanks.

Solution

You should check out the Fancybox documentation for v3 - implementation seems to have changed somewhat since earlier versions:

http://fancyapps.com/fancybox/3/docs/#inline

Bearing that in mind, the following seems to work fine:

$(document).ready(function() { 
 $(".jwVideoClick").click(function(event) {
   $.fancybox.open({
     src  : '<div style="width:400px;background-color:transparent;"><div id="video_container"></div></div>',
     type : 'inline',
     opts : {
       onComplete : function() {
         var playerInstance = jwplayer("video_container").setup({
           file: "http://path-to-s3-file.mp4",
           width:"100%",
           aspectratio:"16:9"
         });
       }
     }
  });    
 }); 
});