媒体查询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文本能够占据所有空间。我正在使用vw而不是px或em作为文本，以便它在小型设备上缩小。

感谢

Answer 1

您可以使用下面的，它只是删除显示视频，并增加了一个绿色背景的幻灯片：

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

     #background_video{ 
      display:none; 
     } 
}