css - HTML5 背景视频不断出现，带有媒体查询

Question

所以我的 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 -->

Answer 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
}