html - 使用媒体查询隐藏 HTML5 视频

Question

我有一个带有全屏宽度和高度视频背景的着陆页。一切正常。但是，当我尝试使用媒体查询以移动分辨率隐藏视频时，它根本不会隐藏。

我试过将视频放在一个 div 中，并将该 div 设置为不显示。也没用。

有人知道如何为移动设备隐藏背景视频吗？

这是主要代码。

HTML:

<div id="video_bg">
    <video id="video_background" autoplay loop>   
        <source src="backgroundmovie.webm" type="video/webm" />
        <source src="backgroundmovie.mp4" type="video/mp4" />  
    </video> 
</div>

CSS:

#video_background {
  position: absolute; 
  bottom: 0px; 
  right: 0px; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden;
}

@media only screen and (max-width: 960px) {
    #video_bg { display:none; }
    #video_background { display:none; }
}

Answer 1

您可以尝试使用 @media only screen and (max-width: 960px) {#video_bg:display:none !important;} 来检查是否有效。

编辑

或者你可以继承上面的标签，然后像下面那样做一个display:none;。

@media only screen and (max-width: 960px) {
    div#video_bg video#video_background source {display:none;}
    }

希望这对您有所帮助。