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文本占用所有空间。我目前正在使用vw而非px或em作为文字，以便在小型设备上缩小。

由于

Answer 1

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

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

        #background_video{
            display:none;
        }
 }

媒体查询HTML5背景视频

1 个答案: