使用媒体查询隐藏 HTML5 视频

Posted 2023-03-05

【中文标题】使用媒体查询隐藏 HTML5 视频

【英文标题】：hide HTML5 video using media query

【发布时间】：2013-05-08 16:10:34

【问题描述】：

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

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

【问题讨论】：

它似乎工作（jsfiddle.net/8D9HF）。确切的问题在哪里？也许您的移动设备不支持媒体查询？

【参考方案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;
    

希望这会有所帮助。

【讨论】：

为什么包含!important？

!important 会覆盖任何其他可能影响#video_bg 的代码。那个没用。

我只是在他的 CSS 中加入了了解天气的信息，如果某些东西正在被继承以防止它不显示任何内容。 - @phpNoOb

只是想知道...为什么隐藏源而不是视频？ ?