HTML5 背景视频的媒体查询

Question

我的新网站需要帮助。我有一个自动播放的 HTML5 背景视频。该视频是自托管的。问题是，当页面缩小时，它显然看起来很讨厌。实际上，在智能手机上观看时无法播放该视频。这是我的视频的代码：

                <video id="background_video" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/Deer_Picture.png">
                <source src="img/deer_eating_leaves.mp4" type="video/mp4">
                <source src="img/deer_eating_leaves.webm" type="video/webm">
                Sorry, your browser does not support HTML5 video.
            </video>

和 CSS :

video { 
position: relative;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 90%;
width: auto;
height: auto%;
z-index: -100;
transform: translateX(-50%) translateY(-50%);}

我想要在智能手机上观看时使用绿色背景而不是视频。要了解发生了什么，请访问网站：repeltecusa.com 同样，我希望 h2 文本包含所有 space。我目前使用 vw 而不是 px 或 em 作为文本，以便它在小型设备上缩小。

谢谢

Answer 1

您可以使用以下方法，它只会删除显示视频并为幻灯片添加绿色背景：

 @media screen and (min-width: 480px) {
         #hero-slides {
             background: green;
        }

        #background_video{
            display:none;
        }
 }

HTML5 背景视频的媒体查询

media queries for HTML5 background video

css

html5-video

media-queries

twitter-bootstrap-3