Javascript 全屏视频高度CSS问题

我需要用视频创建一个div。在桌面和手机上，视频应该是全屏高度，应该是精确的宽度和高度（不是全屏高度）。这是我的桌面代码，但我不能在手机上做任何事情。你能帮我学一下css吗。谢谢

你也可以检查这个

HTML:

<header id="header-container" role="banner">
    <div class="top-image test-top"></div>
    <div id="header-video-container" class="zoom">
        <img id="header-fallback" src="yourimage.jpg" alt="" />
        <video id="header-video" controls autoplay loop muted pauseinline width="1280" height="720" role="img">
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
        </video>
    </div>
    <a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fas fa-pause"></i></a>
</header>

---

您可以使用

媒体查询

，如下所示

@media only screen and (max-width: 768px) {
   /* For mobile phones: */
   #header-container video {
       width: 100%;
   }
}

---

除了Niraj的答案之外，您还可以将高度设置为

auto

，将视频推回到顶部，我猜这就是您想要的

@媒体屏幕和（最大宽度：500px）{
#标题容器视频，#标题回退{
宽度：100%；
高度：自动；
}
}

此外，CSS无法检测“移动设备”是什么，但我们可以使用媒体查询根据屏幕大小更改内容。您可以根据您认为最适合站点的内容编辑

500px

值

@media only screen and (max-width: 768px) {
   /* For mobile phones: */
   #header-container video {
       width: 100%;
   }
}