我做了很多研究，尽管有些问题/评论确实为我指明了正确的方向，但我仍然停滞不前。
摘要： HTML5 视频显示控件，但无法单击。当你浏览它们时，它们就会消失。您无法单击暂停、播放、静音等任何操作。请帮我弄清楚发生了什么事。
该网站是www.innovo-medical.com http://innovo-medical.com（如果你想看看发生了什么）
手续如下：
div.video-background {
height: 100%;
left: 0;
overflow: hidden;
/*position: fixed;
top: 96px;*/
vertical-align: top;
width: 1180px;
/*z-index: -1; */
padding-top:75px;
position:relative;
margin: 0 auto;
margin-bottom:-70px;
}
div.video-background video {
min-height: 100%;
min-width: 100%;
z-index: -2 !important;
}
div.video-background > div {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
div.video-background .circle-overlay {
left: 50%;
margin-left: -590px;
position: absolute;
top: 120px;
}
div.video-background .ui-video-background {
display: none !important;
}
<div class="video-background" id="video-background">
<video loop="loop" autoplay poster="{{ 'Ladyinblue.jpg' | asset_url }}" width="100%" controls="1">
<source src="{{ 'InnovoThermometer.mp4' | asset_url }}" type="video/mp4">
<source src="{{ 'InnovoThermometer.webm' | asset_url }}" type="video/webm">
<source src="{{ 'InnovoThermometer.ogg' | asset_url }}" type="video/ogg">
<img alt="" src="{{ 'Ladyinblue.jpg' | asset_url }}" width="640" height="360" title="No video playback capabilities, please download the video below">
</video>
</div>
Update
虽然拥有<img>标签里面的<video>标签错误，那不是你的问题。当屏幕大小调整为窄时，您有几个元素与视频控制栏重叠。不要试图削减违规元素的高度并冒着布局稳定性风险，只需在 CSS 中输入以下内容：
div.video-background {
z-index: 99999;
}
**OR**
div.video-background video {
z-index: 1 !important;
}
你有一个<img>标签里面的<video>标签，需要将其删除：
<video loop="loop" autoplay="" poster="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/Ladyinblue.jpg?4954843373998890788" width="100%" controls="">
<source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.mp4?4954843373998890788" type="video/mp4">
<source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.webm?4954843373998890788" type="video/webm">
<source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.ogg?4954843373998890788" type="video/ogg">
<!---REMOVE THIS TAG--<img alt="" src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/Ladyinblue.jpg?4954843373998890788" width="640" height="360" title="No video playback capabilities, please download the video below">---REMOVE THIS TAG --->
</video>
除了它在一段时间内无效的事实之外<video>标记它正在抑制它处理用户交互的方式。属性[poster]已经在<video>标签，因此您无需担心它在空闲时没有静态图像可显示。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
