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 class而不是＃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
}

Answer 2

尝试在媒体查询中使用#video-container代替.video-container。

HTML5背景视频不断出现，w媒体查询

2 个答案: