1

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

我尝试将视频包含在一个 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; }
}
4

1 回答 1

0

您可以尝试@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;}
    }

希望这可以帮助。

于 2013-05-14T11:51:10.320 回答