嵌入的 youtube 视频加载但不播放

Question

我正在开发一个 Shopify 网站，我想嵌入一个 Yt 视频。我选择自己做。

按照 Youtube API 和相关 (https://developers.google.com/youtube/iframe_api_reference?hl=it#Getting_Started) 我设法基本上复制并粘贴了以下代码：

<div id="ytplayer"></div>

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

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: '{{ section.settings.id }}'
    });
  }
</script>

当然 {{ section.settings.id }} 工作正常，实际上视频播放器已加载，但当按下播放视频时，我会提示“出现错误。稍后再试。”事物。所以我想这可能是因为该网站受密码保护，但后来我尝试了一个实时网站（Tryit Editor），它也不起作用。

感谢任何帮助，非常感谢！

编辑：这是工作示例：https://jsfiddle.net/kb06t7rh/

Answer 1

<div id="ytplayer"></div>

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

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: '{{ section.settings.video_url.id }}'
    });
  }
</script>

视频选项的 Shopify 架构

{
    "type": "video_url",
    "id": "video_url",
    "label": "video_url",
    "accept": ["youtube"]
}