在YouTube播放器上创建CSS叠加层以防止点击

我正在尝试嵌入YouTube视频，并希望创建一个用户无法与之互动的视频。我已经设法删除了所有 ui 内容，但似乎无法阻止点击。我偶然发现了一个网站，该网站正在做我想做的事情：在右下角，有一个 youtube 视频，带有明显的覆盖层，可以防止点击;这看起来很简单，但我想不通！任何建议将不胜感激。这是我到目前为止的代码：

<!DOCTYPE html>
<html>
<body>
  <div id="player"></div>
  <script>
    // 2. 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);
     // 3. This function creates an <iframe> (and YouTube     player)
     //    after the API code downloads.
    var player;
    var start = 30;
    var end = 35;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '250',
        width: '400',
        videoId: 'BalUcQpYN6k',
        playerVars: {
          'autoplay': 1,
          'controls': 0,
          'disablekb': 1,
          'start': start,
          'end': end,
          'fs': 0,
          'iv_load_policy': 3,
          'loop': 0,
          'modestbranding': 1,
          'showinfo': 0,
          'rel': 0
        }
      });
    }
  </script>
</body>
</html>

您可以简单地将其添加到您的 css 中。

#player {pointer-events: none;}

#player {pointer-events: none;}

<!DOCTYPE html>
<html>
<body>
  <div id="player"></div>
  <script>
    // 2. 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);
     // 3. This function creates an <iframe> (and YouTube     player)
     //    after the API code downloads.
    var player;
    var start = 30;
    var end = 35;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '250',
        width: '400',
        videoId: 'iRkCIuY2pHc',
        playerVars: {
          'autoplay': 1,
          'controls': 0,
          'disablekb': 1,
          'start': start,
          'end': end,
          'fs': 0,
          'iv_load_policy': 3,
          'loop': 0,
          'modestbranding': 1,
          'showinfo': 0,
          'rel': 0
        }
      });
    }
  </script>
</body>
</html>

我不知道一年后我是如何回到这里的，但出于好奇，我去查找了 OP 的链接，pointer-events: none正是他们正在使用的，如下所示。

.player-container > .modal-inner-container > #player, .player-container > .modal-inner-container #html5-player, .lyrics-container > .modal-inner-container > #player, .lyrics-container > .modal-inner-container #html5-player {
    pointer-events: none;
    width: 100%;
    height: 100%;
    background-color: #000;

更新 HTML 更多：

 <div id="playArea">
<div id="player"></div>
<div class="yt-overlay"></div>
</div>

并添加此 CSS：

.yt-overlay, .#playArea > .yt-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

在玩家之前放置一个块元素。（ #shield ）
#shield和#player都包装在一个块元素中。（ #main ）
重要的部分是#main是position:relative的，它的子元素是position:absolute的，覆盖层（#shield）的z-index高于#player。
代码段的其余部分应该是不言自明的。

片段

#main {
  position: relative;
  width: 400px;
  height: 250px;
  z-index: -1;
}
#shield {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  cursor: not-allowed;
  background: transparent;
}
#player {
  position: absolute;
}

<!DOCTYPE html>
<html>
<body>
  <main id='main'>
    <section id='shield'></section>
    <div id="player"></div>
  </main>
  <script>
    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;
    var start = 30;
    var end = 35;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '250',
        width: '400',
        videoId: 'BalUcQpYN6k',
        playerVars: {
          'autoplay': 1,
          'controls': 0,
          'disablekb': 1,
          'start': start,
          'end': end,
          'fs': 0,
          'iv_load_policy': 3,
          'loop': 0,
          'modestbranding': 1,
          'showinfo': 0,
          'rel': 0
        }
      });
    }
  </script>
</body>
</html>

相关内容

最新更新

热门标签：