html - Youtube 背景视频

标签 html css

<分区>

我有一个站点,索引是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答案建议两种方法。

Like you said you have to change the z-index of every child of body except the iframe.

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

#youtube_bg {
z-index : 1;
}

Or you change the z-index of body and html to -1, the iframe to 0 and the content keeps at 1 or auto.

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

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

上一篇:html - 如何在 IE 中的正确位置打断长句

下一篇:css - 为什么图像在轮播中不断跳动?

相关文章:

php - fatal error : Class 'App\Http\Controllers\Input' not found when sending a form

javascript - jQuery 检查 CSS 颜色值不工作

html - 设置div的高度以适应剩余空间的方法

html - 使导航全高

javascript - 允许在溢出的较小父 Div 内动态调整大小的子 Div :auto to be larger than their parent

javascript - 克隆范围不起作用

html - 将图像放在标题中(同一行)

php - TTF 字体不显示在动态 SVG 中

html - 创建带有本地 HTML 文件链接的导航栏

javascript - Angular 7 - 为动态创建的组件添加拖放行为