HTML5 背景视频不断显示，带有媒体查询答案

【问题标题】：HTML5 background video keeps showing up, w media queriesHTML5 背景视频不断显示，带有媒体查询
【发布时间】：2015-06-21 20:05:17
【问题描述】：

所以我的 wordpress CMS 上有这个背景视频，但是现在我想告诉它隐藏在较小的设备上；它不断出现。这里出了什么问题？代码如下：

.header-unit {
  height: 618px;
  border: 0px solid #000;
  border-right:none;
  border-left: none;
  position: relative;
  padding: 20px;
}
#video-container {
position: absolute;
}

#video-container {
top:0%;
left:0%;
height:100%;
width:100%;
-webkit-filter: blur(7px);
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
overflow: hidden;
}

#video-container:hover {
 -webkit-filter: blur(0px);
 -moz-opacity: 1;
 opacity: 1;
}
 video {
  position:absolute;
  z-index:0;
 }
  video.fillWidth {
  width: 100%;

@media only screen and (max-width: 479px) and (min-width: 0px)
.video-container {
    background:none;!important
}

顺便说一句，我看到过类似的问题，但答案对我没有帮助:-)

这是 HTML：

<div class="header-unit">
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src=".../uploads/2015/03/test.mp4" type="video/mp4"/>
</video>
</div><!-- end video-container -->
</div><!-- end .header-unit -->

【问题讨论】：

您的媒体查询的目标是 .video-container 类而不是 #video-container id？
能把相关的 HTML 也发一下吗？
哎呀，你是对的，试着用它走不同的路线，却忘了把它改回来。定位 id 时它也不起作用
容易犯的错误——有时我们都会盲目地盯着代码看！

标签： css html wordpress media-queries

【解决方案1】：

您的媒体查询的目标是 .video-container 类而不是 #video-container id，并且您的视频是 html 元素而不是背景元素

改变

@media only screen and (max-width: 479px) and (min-width: 0px)
.video-container {
background:none;!important
}

到

@media only screen and (max-width: 479px) and (min-width: 0px)
#video-container {
    display:none;!important
}

【讨论】：

非常感谢 :-)），这通常应该可以完成这项工作 :( 但是那个该死的视频仍然出现！
你有我可以看到的实时预览吗？
我刚刚又看了一遍 - 您需要隐藏整个 div，因为视频不是“背景”元素 - 抱歉，已更新答案
啊啊啊我明白了！谢谢一百万！
没问题！乐于助人:-)

【解决方案2】：

尝试在您的媒体查询中使用#video-container 而不是.video-container。

【讨论】：