Closing fancybox when youtube video has finished

image of overlay covering video

The website I am working on uses fancybox to display a youtube video. My PO would like me to add the functionality of the "popup" closing when the video has finished.

I've been searching around for a simple way to do this but the solution I'm about to show you seems to be the go to. I have essentially copied some working code I found in a codepen and I'm still getting the error Uncaught TypeError: Cannot read property 'find' of undefined. I am not all that familiar with Jquery as I learned JS after the arrival of es6 but I'm thinking maybe this problem is related to my version of jquery.

Uncaught TypeError: Cannot read property 'find' of undefined

Here is the link for the reference of the working code. http://jsfiddle.net/kuzvac/Dqf79/

Here is my code:

<a class="fancybox fancybox.iframe" href="https://youtube.com/watch?v=6kkW6qK0GCs?enablejsapi=1&wmode=opaque">
<div class="tutorial">See how it works
<i class="play circle icon play-button"></i>
<br>
</div>
</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script>
// Fires whenever a player has finished loading
function onPlayerReady(event) {
event.target.playVideo();
}

// Fires when the player's state changes.
function onPlayerStateChange(event) {
// Go to the next video after the current one is finished playing
if (event.data === 0) {
$.fancybox.close();
}
}

// The API will call this function when the page has finished downloading the JavaScript for the player API
function onYouTubePlayerAPIReady() {

// Initialise the fancyBox after the DOM is loaded
$(document)
.ready(function() {
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect: 'none',
closeEffect: 'none',
nextEffect: 'none',
prevEffect: 'none',
padding: 0,
margin: 50,
beforeShow: function() {
// Find the iframe ID
var id = $.fancybox.inner.find('iframe')
.attr('id');

// Create video player object and add event listeners
var player = new YT.Player(id, {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
});
// Launch fancyBox on first element
$(".fancybox")
.eq(0)
.trigger('click');
});

}
</script>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.