无法使嵌入视频响应

Question

我已经让视频响应了，但正如您所看到的那样，当浏览器完全展开时，宽高比会相反。 iframe很窄而且很高，但是当浏览器缩小并且视频位于文本下方时，该比率会自行纠正。如何在拉伸的浏览器中修复比率？这是我的代码。

.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

  

我想知道如何将视频放在右边的文本旁边，放在同一行。

您可以使用display: flex;类div上的row来实现此目的。然后，将flex-direction设置为row。

  

如何在拉伸的浏览器中修复比率？

修改
要在保留iframe的尺寸的同时填充容器，请使用display: flex div上的.video-responsive属性和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。

希望我做对了：）