使用媒体查询隐藏HTML5视频

我有一个全屏宽度为&的着陆页高度视频背景。一切正常。但是，当我尝试使用媒体查询来隐藏移动解析视频时，它根本不会隐藏。使用媒体查询隐藏HTML5视频

我试图把视频封闭在一个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; } 
}

来源

2013-05-14 Jefferson

它似乎工作（http://jsfiddle.net/8D9HF/）。 exakt问题在哪里？也许你的移动设备不支持媒体查询？ – algorhythm 2013-05-14 12:34:39

您可以尝试@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-14 11:51:10 Nitesh

你为什么包括'！important'？ – samayo 2013-05-14 11:53:17

！重要覆盖可能影响#video_bg的任何其他代码。这没什么用。 – Jefferson 2013-05-14 11:54:58

我只是包括了解他的CSS中的天气，如果有东西正在继承，保护它不显示任何东西。 - @phpNoOb – Nitesh 2013-05-14 11:55:32

使用媒体查询隐藏HTML5视频

回答

相关问题