我如何才能获得一个始终充满英雄气息的视频？

如何解决我如何才能获得一个始终充满英雄气息的视频？

我有一个客户希望将视频作为他们在英雄版块中看到的第一件事（我认为这不是一个好主意，但我不会再与之抗争）。

我的问题是，在调整大小时无法正确填充英雄区域。在1080分辨率下，它看起来不错，但没有响应。视频中包含文字，因此需要观看。有什么办法可以解决这个问题？

HTML

<div class="home-hero container-fluid p-0">
<div id="heroCarousel" class="carousel slide carousel-fade" data-ride="carousel">
    <!-- <div class="background-overlay"></div> -->
    <div class="container">
        <div class="row text-center">
            <div class="hero-inner-content offset-md-0 col-md-12 offset-lg-1 col-lg-10 wow animated fadeInLeft">
                <video muted="" autoplay="" class="wow fadeIn animated">
                    <source src="/media/PowerTrakGrow-LED-Agri-Grow-Lighting.mp4" type="video/mp4">
                </video>
            </div>
        </div>
    </div>
</div>
</div>

CSS

.home-hero video {
left: 50%;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%,-50%) !important;
-o-transform: translate(-50%,-50%) !important;
transform: translate(-50%,-50%) !important;
/* width: 100%; */
z-index: 5; 
}

解决方法

我已经更新了您的CSS，并在代码中添加了以下内容：

width: 100%;
height: 100%;

让我知道这是否对您有用。

.home-hero video {
left: 50%;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%,-50%) !important;
-o-transform: translate(-50%,-50%) !important;
transform: translate(-50%,-50%) !important;
/* width: 100%; */
z-index: 5; 
}

<div class="home-hero container-fluid p-0">
<div id="heroCarousel" class="carousel slide carousel-fade" data-ride="carousel">
    <!-- <div class="background-overlay"></div> -->
    <div class="container">
        <div class="row text-center">
            <div class="hero-inner-content offset-md-0 col-md-12 offset-lg-1 col-lg-10 wow animated fadeInLeft">
                <video controls>
                      <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
                </video>
        </div>
    </div>
</div>
</div>