html - 在使嵌入式视频响应时遇到问题

Question

我已将视频设为响应式，但正如您所见，当浏览器完全拉伸(stretch)时，宽高比会反转。 iframe 又窄又高，但当浏览器缩小并且视频位于文本下方时，比例会自行纠正。如何修复拉伸(stretch)浏览器中的比例？这是我的代码。

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

<section class="section1">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 section1Text">
        <h2 class="text-center">What We Have to Offer</h2>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel massa iaculis, posuere augue et, pharetra ipsum. Suspendisse metus ex, pellentesque id dolor in, vehicula varius tortor. Nam auctor ante nisi.</p>
      </div>
      <div class="video-responsive">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/bsY2GdBEvSA?showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</section>

Answer 1

I would like to know how to have the video placed besides the text on the right, in the same row.

您可以在 row 类 div 上使用 display:flex; 来实现这一点。然后，将 flex-direction 设置为 row。

How can I fix the ratio in the stretched browser?

编辑:
要在保持 iframe 尺寸的同时填充容器，请使用 .video-responsive div 和 上的 display: flex 属性flex-basis: 100%; 在 iframe 上:

.row {
  display: flex;
  flex-direction: row;
  background: hotpink;
}

.video-responsive {
  flex-basis: 50%;
  min-height: 100vh;
  display: flex;
  background: teal;
}

.video-responsive iframe {
  flex-basis: 100%;
}

.section1Text {
  flex-basis: 50%;
}

<section class="section1">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 section1Text">
        <h2 class="text-center">What We Have to Offer</h2>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel massa iaculis, posuere augue et, pharetra ipsum. Suspendisse metus ex, pellentesque id dolor in, vehicula varius tortor. Nam auctor ante nisi.</p>
      </div>
      <div class="video-responsive">
        <iframe src="https://www.youtube.com/embed/bsY2GdBEvSA?showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</section>

请注意，我已经删除了 HTML 中视频的尺寸，不确定这是否有用...

---

这是一个full reference of CSS Flexbox .

希望我做对了:)