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 に答える