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

时间：2018-06-18 21:30:27

标签： javascript android html css landscape-portrait

我正在使用全屏Bootstrap 4轮播。幻灯片不包含图片，但包含视频和字幕。

在手机上，我希望视频占据整个屏幕高度，并在人像上保持居中，手持设备

＆＃13;
＆＃13; 
#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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

使用我的肖像特定CSS我已设法强制全高和自动，以便视频保持适当的比例。但我没有成功地将视频集中在一起。

我如何实现这一目标？

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题