Question

我正在尝试嵌入YouTube视频，我希望创建一个用户无法进行互动的视频。我已经设法删除所有的ui东西，但似乎无法阻止点击。我偶然发现了一个正在进行exactly what I want to do的网站：在右下方，有一个YouTube视频，其中有一个明显的叠加层，可以阻止点击;它似乎很简单，但我无法弄明白！任何建议都会非常感激。到目前为止，这是我的代码：

def plot_func(x,y,fig,inst):

    ax = fig.gca()
    ax.set_xlim(inst.xlimit)
    ax.set_ylim(inst.ylimit)
    ax.plot(x,y,linewidth=inst.linwidth)

    return fig

Answer 1

您可以将其添加到您的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;

Answer 2

稍微更新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;
}

Answer 3

在播放器前放置一个块元素。（#shield）
接下来将#shield和#player包装在一个块元素中。（#main）
重要的部分是#main position:relative，其子元素为position:absolute，叠加层（#shield）的z-index高于#player 1}}。
片段的其余部分应该是不言自明的。

<强>段

#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>

在youtube播放器上创建CSS覆盖以防止点击

3 个答案: