html - Youtube背景视频

This question already has an answer here:

How do I make this Youtube Video clickable (css + z-index)?
                                
                                    （1个答案）
                                
                        
                                4年前关闭。
            
                    
我有一个网站，索引是youtube的背景视频。

我有这个代码

 <div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  <iframe frameborder="0" height="100%" width="100%"
    src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
  </iframe>
</div>

我在div中添加了样式命令，并且效果完美。但是这种风格不会让我暂停视频。

有帮助吗？谢谢

最佳答案

这是因为页面中的其他元素覆盖了您的iFrame。它不会获得您的点击。

This答案提出了两种方法。


  就像您说的那样，您必须更改每个身体孩子的z-index
  除了iframe。

body > * {
z-index : 2 !important;
}

#youtube_bg {
z-index : 1;
}

  或者您将body和html的z-index更改为-1，将iframe更改为0，然后
  内容保持为1或自动。

html, body {
z-index : -1;
}
#yotube_bg {
z-index : 0;
}

关于html - Youtube背景视频，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33907653/