如何防止用户在嵌入的 YouTube 视频中快进/擦洗/跳过？

Question

我想向用户展示一个嵌入的 HTML YouTube 视频，并防止他们快进或跳到视频的结尾。我可以通过使用 YouTube 的 API 删除播放器控件（参见代码 sn-p）来获得大部分的方法，但是在 iOS 上，仍然可以通过捏合让视频在本机播放器（连同它的擦洗控件）中运行- 缩放。有什么简单的方法可以做到这一点吗？

我应该注意，我也尝试过使用 .m4v 视频作为文件，而不是在 HTML5 中提供更多选项，但这对我来说现在不是一个理想的解决方案（带宽和下载问题）。

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: 'KjLYjf4B7xQ',
          events: {
            'onReady': onPlayerReady
          },
         playerVars: {rel: 0, 
                      showinfo: 0, 
                      controls: 0, 
                      disablekb: 1,
                      modestbranding: 1,
                      cc_load_policy: 1,
                      playsinline: 1}
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
      }

<div id="player"></div>

（我尝试让它作为 sn-p 运行，但出现跨域错误。）

感谢任何帮助。谢谢！

编辑：除了 Mauricio 的回答之外，我还必须添加一个按钮来启动视频，因为用户无法在视频内部单击来启动它。像这样的：

  function onPlayerReady(event) {
    event.target.playVideo();

    var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
       player.playVideo();
    });
  }

对于按钮：

<button id="play-button">Play Video</button>

Answer 1

如果您需要禁用用户与视频的交互，您可以在包含 iframe 的 div 中添加 css 样式。

在这种情况下，添加以下 css 样式：

pointer-events: none

所以，CSS 如下：

#player {
  pointer-events: none;
}