难以解决的问题！ :: TypeError：player.loadVideoById不是函数

Question

这里真的需要帮助。我已经坚持了两天！

调用$('#myModal').on('show.bs.modal'时。我收到TypeError: player.loadVideoById is not a function. (In 'player.loadVideoById(x)', 'player.loadVideoById' is undefined)错误。

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

在JS Fiddle中，代码可以工作，但是当我将其添加到代码库中时，它停止工作。我还有很多其他的js代码和CSS代码，它们必须受到干扰。有没有办法防止干扰？也许将我的js代码包装成一个块或添加更多特定的引用？是命名问题吗？如果是这样，我该怎么办？

我真的不知道该怎么做。我花了两天时间，却一无所获。

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); 

  });

});