使用媒體查詢隱藏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視頻

回答

相關問題