YT Iframe API报错：TypeError:无法将undefined或null转换为对象

我在网站中嵌入了YouTube iframe，想通过YT Iframe API对视频进行控制。按官方指南操作后功能看似正常，但Chrome浏览器控制台会弹出间歇性错误：错误并非每次都出现，一般在启动/暂停视频、点击iframe外部后再返回内部操作播放或暂停时触发。控制台提示错误出在YT API文件里，不是本地代码的问题。我已经完全复制了官方示例代码，可错误还是存在，有没有人遇到过这个问题并知道解决办法？

我使用的官方示例代码： #

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <style>
    iframe {
      border-width: 30px;
    }
  </style>
</head>
<body>
  <iframe id="myVid" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
    style="border: solid 24px #37474F"></iframe>

  <script src="https://www.youtube.com/iframe_api"></script>
  <script>
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player("myVid", {
        events: {
          onReady: onPlayerReady,
          onStateChange: onPlayerStateChange,
        },
      });
    }
    function onPlayerReady(event) {
      document.getElementById("myVid").style.borderColor = "#FF6D00";
    }
    function changeBorderColor(playerStatus) {
      var color;
      if (playerStatus == -1) {
        color = "#37474F"; // unstarted = gray
      } else if (playerStatus == 0) {
        color = "#FFFF00"; // ended = yellow
      } else if (playerStatus == 1) {
        color = "#33691E"; // playing = green
      } else if (playerStatus == 2) {
        color = "#DD2C00"; // paused = red
      } else if (playerStatus == 3) {
        color = "#AA00FF"; // buffering = purple
      } else if (playerStatus == 5) {
        color = "#FF6DOO"; // video cued = orange
      }
      if (color) {
        document.getElementById("myVid").style.borderColor = color;
      }
    }
    function onPlayerStateChange(event) {
      changeBorderColor(event.data);
    }
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Onod