html - 在 bootstrap 列中包含 mp4 视频

Question

我想在我的网站上放一个视频。但是视频和图片的高度不一样，我需要这个修复。我怎样才能确保视频覆盖整个列并且始终与其他两列高度相同

目前这是我的代码:

<div class="container" style="width: 100%;">
        <div class="row">
            <div class="col-md-4 fullscreen-bg">
            <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
            <source src="video/kerntrekken.mp4" type="video/mp4">
            </video>
            </div>
            <div class="col-md-4" style="padding: 0;">
                <img src="img/Kluizen.jpg" width="100%" height="354">
            </div>
            <div class="col-md-4" style="padding: 0;">
                <img src="img/Kluizen.jpg" width="100%" height="354">
            </div>
        </div>
    </div>

这是我的 CSS:

.fullscreen-bg {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    padding-left: 0px;
    padding-right: 0px;
}

.fullscreen-bg__video {
  background-size: cover;
    width: 100%;
    height: 100%;
}

https://i.gyazo.com/8210a9c6a5e0aa01225526fa70987b65.png

Answer 1

视频标签可以取宽高为100%

<video width="100%" height="100%" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>