javascript - CSS:强制视频显示全高并以纵向手持设备为中心

Question

我正在开发全屏 Bootstrap 4 轮播。幻灯片不包含图像，而是包含视频 和标题。

在手机上，我希望视频占据屏幕的整个高度并在纵向方向上保持居中，手持设备。

#full_slider {
  overflow: hidden;
  background: #010001;
}

#full_slider .carousel-item {
  overflow: hidden;
  transition: transform 1.6s ease-in-out;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#full_slider .carousel-item video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  z-index: -1;
}

#full_slider .carousel-item .video-caption {
  max-width: 768px;
  padding: 0 65px;
  color: #fff;
}

#full_slider .carousel-item h3 {
  font-weight: 900;
}

#full_slider .carousel-item.active {
  display: flex !important;
  position: relative;
}

#full_slider .carousel-item.left-slide,
#full_slider .carousel-item.right-slide {
  display: flex !important;
}

#full_slider .carousel-item-left,
#full_slider .carousel-item-right {
  display: flex !important;
}

@media screen and (orientation: portrait) {
  #full_slider video {
    height: 100vh !important;
    width: auto !important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
  <div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <video src="http://code-love.tk/demos/prop/video/eroi.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest text-center text-md-left">Eroi si Necunoscuti</h3>
          <p class="allcases text-center text-md-left">
            <a class="inherit" href="caz.html">Studiu de caz</a>
          </p>
        </div>
      </div>

      <div class="carousel-item">
        <video src="http://code-love.tk/demos/prop/video/meda.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest text-center text-md-left">Salam de Casa Extra</h3>
          <p class="allcases text-center text-md-left">
            <a class="inherit" href="caz.html">Studiu de caz</a>
          </p>
        </div>
      </div>

      <div class="carousel-item">
        <video src="http://code-love.tk/demos/prop/video/silva.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest text-center text-md-left">Berea e noua</h3>
          <p class="allcases text-center text-md-left">
            <a class="inherit" href="caz.html">Studiu de caz</a>
          </p>
        </div>
      </div>
    </div>

    <a class="carousel-control-prev" href="#full_slider" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
    <a class="carousel-control-next" href="#full_slider" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  </div>
</div>

通过我的肖像专用 CSS，我设法强制全高和自动，以便视频保持适当的比例。但是我没有成功地将视频居中。

我该如何实现？

Answer 1

我已经更新了您的纵向媒体查询样式。

@media screen and (orientation: portrait) {
  #full_slider .carousel-item video {
    height: 100vh !important;
    width: auto !important;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}

#full_slider {
  overflow: hidden;
  background: #010001;
}

#full_slider .carousel-item {
  overflow: hidden;
  transition: transform 1.6s ease-in-out;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#full_slider .carousel-item video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  z-index: -1;
}

#full_slider .carousel-item .video-caption {
  max-width: 768px;
  padding: 0 65px;
  color: #fff;
}

#full_slider .carousel-item h3 {
  font-weight: 900;
}

#full_slider .carousel-item.active {
  display: flex !important;
  position: relative;
}

#full_slider .carousel-item.left-slide,
#full_slider .carousel-item.right-slide {
  display: flex !important;
}

#full_slider .carousel-item-left,
#full_slider .carousel-item-right {
  display: flex !important;
}

@media screen and (orientation: portrait) {
  #full_slider .carousel-item video {
    height: 100vh !important;
    width: auto !important;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
  <div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <video src="http://code-love.tk/demos/prop/video/eroi.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest text-center text-md-left">Eroi si Necunoscuti</h3>
          <p class="allcases text-center text-md-left">
            <a class="inherit" href="caz.html">Studiu de caz</a>
          </p>
        </div>
      </div>

      <div class="carousel-item">
        <video src="http://code-love.tk/demos/prop/video/meda.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest text-center text-md-left">Salam de Casa Extra</h3>
          <p class="allcases text-center text-md-left">
            <a class="inherit" href="caz.html">Studiu de caz</a>
          </p>
        </div>
      </div>

      <div class="carousel-item">
        <video src="http://code-love.tk/demos/prop/video/silva.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest text-center text-md-left">Berea e noua</h3>
          <p class="allcases text-center text-md-left">
            <a class="inherit" href="caz.html">Studiu de caz</a>
          </p>
        </div>
      </div>
    </div>

    <a class="carousel-control-prev" href="#full_slider" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#full_slider" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</div>