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

Posted 2023-03-06

【中文标题】HTML5 背景视频不断显示，带有媒体查询

【英文标题】：HTML5 background video keeps showing up, w media queries

【发布时间】：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 时它也不起作用

容易犯的错误——有时我们都会盲目地盯着代码看！

【参考方案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。