javascript - 我无法让Youtube API在Squarespace中工作

我正在尝试在我的Squarespace网站中控制youtube iframe。我希望它在页面加载时自动播放，然后如果我滚动并且它不在视口中，我希望它暂停。

这是我所做的:

这是我的iframe:

<iframe id="ytplayer" width="560" height="315" src="https://www.youtube.com/embed/uuRC8Pmud3o?enablejsapi=1&rel=0&showinfo=0&controls=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

这是我的脚本:

<script>
  // This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // This function YouTube player
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

  // The API calls this function when the player's state changes.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      done = true;
    }
    // Loop the video
    if (event.data == YT.PlayerState.ENDED) {
      player.playVideo();
    }
  }

  // On scroll Pause/Play the video player
  $(window).scroll(function() {
    var top_of_element = $("#ytplayer").offset().top;
    var bottom_of_element = $("#ytplayer").offset().top + $("#ytplayer").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).height();
    var top_of_screen = $(window).scrollTop();

    if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
      // The element is visible, trigger play click event
      player.playVideo()
    }
    else {
      // The element is not visible, trigger pause click event
      player.pauseVideo()
    }
  });

</script>

我尝试使用多种方法将脚本添加到Squarespace中，但无法正常工作。脚本要注入(inject)哪里？

我的代码有什么问题？

最佳答案

根据Youtube IFRAME API，只需在网址末尾添加autoplay=1即可，例如:

<iframe id="ytplayer" type="text/html" width="640" height="360"
  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
  frameborder="0"></iframe>

我认为squarespace forum也证实了这一点。