Question

我正在尝试将多个Vimeo视频反复嵌入到彼此之下。当我使用嵌入式响应时，当我使用几个不同的视频时，视频的位置会有所不同。然而，当我在所有div中使用相同的视频时，它们完全对齐。

![here a screenshot of the videos not aligning ] 1

这是我的代码

<section id="gallery">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/209390725" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/152162621" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/150922044" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/209398590" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

在样式表中尝试此操作

iframe[src*=vimeo] {
    width: 100%;
    max-height: 300px;
    height: 100%;
}

这将改变所有vimeo嵌入的尺寸。

Answer 2

问题不在于bootstrap。这是因为您嵌入的视频大小不同。在使用之前，您应该按照此post中的说明自定义视频。

您使用的课程存在一些问题。

Boostrap-4已删除所有*-xs-*个类。因此，当前版本的bootstrap中不存在col-xs-12。您应该使用col-12代替它。
使用col-sm-6就足够了，因为它涵盖了宽度超过576px的所有屏幕。

＆＃13;

<div class="col-sm-6 col-12 gallery">

＆＃13;

响应式将多个视频彼此相邻并相互嵌入

2 个答案: