Question

我有2个缩略图。 1表示图像，另一个表示视频。我设置了图像和视频的高度 img在高度上运行良好，但视频不是。事实上，如果我设置高度，视频会像我输入margin-bottom一样进入底部。如何使视频高度与图像高度相同。在桌面或移动人员？

我的代码

    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
              <div class="thumbnail">
                <div class="thumbnail-img">
                  <img src="img/3.jpg">
                </div>
                <div class="caption">
                  <h5>how to make like</h5>
                    <a href="#" class="uppercase bold">recipe</a>
                </div>
              </div>
            </div>   

                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                  <div class="thumbnail">
                    <div class="thumbnail-img">
                      <video id="video1" class="embed-responsive-item">
                          <source src="video/inspiration-1.mp4" type="video/mp4">
                      </video>
                      <button class="btn btn-primary play" onclick="playPause()"><li class="fa fa-play"></li></button> 
                    </div>
                    <div class="caption">
                      <h5 class="h5-big">HOW TO </h5>
                        <a href="detil.html" class="uppercase bold">recipe</a>
                    </div>
                  </div>
                </div>

css
 .thumbnail-img img, .thumbnail-img video{
width: 100%;
height: 295px;
object-fit: initial;
}

Answer 1

如果我理解正确，您需要缩略图才能播放视频。如果是这样，那么您可以使用视频标记属性poster。在这种情况下，您不需要模拟缩略图，您可以使其与视频大小相同。看看我的演示。

video {
  width: 400px;
  object-fit: initial;
}

<video controls  poster="http://s1.oboiki.net/uploads/images/previews/2015/10/fa9a91b41080fc3589ba7d6d66cf0c94/koshaka-a-lya-sova_550x340.jpg">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/mp4">
</video>

Answer 2

试

width: 100%;
height: auto;
max-height: 295px;
object-fit: initial;

Answer 3

我修复了这个错误。它只需要这个代码

.embed-responsive.embed-responsive-16by9 {
width: 100%;
height: inherit;
max-height: 295px;
object-fit: initial;

}

将高度设置为缩略图中的视频

3 个答案: