响应式将多个视频彼此相邻并在彼此下方嵌入

Posted 2023-03-06

【中文标题】响应式将多个视频彼此相邻并在彼此下方嵌入

【英文标题】：responsive embed multiple videos next to each other and under each other

【发布时间】：2018-11-13 20:08:21

【问题描述】：

我正在尝试将多个 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>

【问题讨论】：

嗨。如果此代码不影响您网站中的 Vimeo 视频，请查看我的回答。然后，您必须先编辑 Vimeo 视频，然后再将它们放入网站。 help.vimeo.com/hc/en-us/articles/…

【参考方案1】：

在你的样式表中试试这个

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

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

【讨论】：

谢谢，这很好用。但是，我需要将 2 个视频放在一边，覆盖整个页面..

【参考方案2】：

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

---

您使用的类存在一些问题。

Boostrap-4 已删除所有 *-xs-* 类。所以col-xs-12 在当前版本的引导程序中不存在。您应该使用 col-12 代替它。 使用col-sm-6就足够了，因为它覆盖了所有宽度大于576px的屏幕。

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