创建具有全屏视频，背景循环音乐和中心图片的登录页面

Question

因此，我正在尝试创建一个仅包含全屏​​视频的网站，中间有图片叠加，背景中有音乐。我已经成功地做到了这一点，但是当在移动设备上观看时，它就会变成垃圾。

html, body {
  overflow: hidden;
}

.fullscreen-bg {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}

.fullscreen-bg__video {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#video_overlays {
  position: absolute;
  text-align: center;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 650px;
  height: 650px;
  z-index: 100;
}

<audio autoplay="autoplay" loop="loop">
  <source src="h.mp3" type="audio/mpeg" />
  <source src="h.ogg" type="audio/ogg" />
</audio>
<div class="fullscreen-bg">
  <video loop autoplay muted poster="3.png" class="fullscreen-bg__video">
    <source src="1.mp4" type="video/mp4">
  </video>
  <div id="video_overlays">
    <img src="2.png" alt="">
  </div>
</div>

有关如何修复的任何想法？

Answer 1

要使任何网站在移动设备上正常显示和运行，您需要确保在CSS中实现响应式设计。这不是最好的网站，但请在此处查看一些信息：https://www.w3schools.com/html/html_responsive.asp这将为您提供在移动设备上正确显示视频和图像所需的一切。