Really need help here. I have been stuck on this for 2 days!

When $('#myModal').on('show.bs.modal' gets called. I get a TypeError: player.loadVideoById is not a function. (In 'player.loadVideoById(x)', 'player.loadVideoById' is undefined) error.

https://jsfiddle.net/rdbj3ty1/5/

In JS Fiddle the code works, but when I add it to my code base, it stops working. I have a lot of other js code and CSS code that it must be interfering with. Is there a way to prevent the interference? Maybe wrap my js code with a block or add more specific references? Is namespacing the issue? If so, how do I do that?

I don't really know what to try. I have spent 2 days on this and getting no where.

JS

 var tag = document.createElement('script');

 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 var player;
 function onYouTubeIframeAPIReady() 
 player = new YT.Player('player', 
 height: '390',
 width: '640',
 videoId: 'novideoid',
 events: 
 'onReady': onPlayerReady,
 'onStateChange': onPlayerStateChange
 
 );
 


 // 4. The API will call this function when the video player is ready.

 function onPlayerReady(event) 

 $('.open-popup').click(function() 
 event.target.playVideo();
 );

 $('.close-popup').click(function(e) 
 player.stopVideo();
 );

 

 // 5. The API calls this function when the player's state changes.
 // The function indicates that when playing a video (state=1),
 // the player should play for six seconds and then stop.
 var done = false;
 function onPlayerStateChange(event) 
 if(event.data === 0) 
 $('.close.close-popup').click();
 
 
 function stopVideo() 
 player.stopVideo();
 

 $(function () 
 onYouTubeIframeAPIReady();
 $('#myModal').on('show.bs.modal', function(e) 

 var videoId = $(e.relatedTarget).data('video-id');
 var x = new String(videoId);
 player.loadVideoById(x); 

 );

);