Question

我需要用视频创建一个div。该视频在台式机和移动设备上应为全屏高度，而应在其确切的宽度和高度（而不是全屏高度）内。这是我的台式机代码，但我无法在移动设备上做任何事情。您能帮我css吗？谢谢。

您也可以选中此link

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>

js：

var playPauseBtn = document.getElementById("play-pause");
var player = document.getElementById("header-video");
player.removeAttribute("controls");
playPauseBtn.onclick = function() {
  if (player.paused) {
    player.play();
    this.innerHTML = '<i class="fas fa-pause"></i>';
  } else {
    player.pause();
    this.innerHTML = '<i class="fas fa-play"></i>';
  }
};

CSS：

#header-container {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*z-index: -500;*/
}
#header-container video,
#header-fallback {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#header-video-container:after {
  /* video texture overlay - set to 1 z-index above video */
  content: "";
  background-image: url(../media/img/video-overlay-dot-large.png);
  background-size: 3px 3px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* header video pause button */
#play-pause {
  /*background-color: #50A1CB; /* button color */
  color: white; /* text/arrow color */
  /*display: none;*/
  z-index: 999;
  /* float in bottom right corner */
  /* 20 pixels from edge */
  position: absolute;
  right: 50px;
  top: 50%;
  /* size of button is 50 pixels*/
  width: 50px;
  height: 50px;
  opacity: 0.5;
  transition: 0.6s all;
}
#play-pause:hover {
  opacity: 1;
}
a#play-pause {
  line-height: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 3em;
  text-align: center;
}

Answer 1

除了Niraj的答案外，您还可以将高度设置为auto，以将视频推回顶部，我猜这是您想要的。

@media screen and (max-width: 500px) {
    #header-container video, #header-fallback {
        width: 100%;
        height: auto;
    }
}

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

Answer 2

您可以按以下方式使用media query

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

全屏视频高度CSS问题

2 个答案: