在使嵌入式视频响应时遇到问题答案

【问题标题】：Having trouble with making embeded video responsive在使嵌入式视频响应时遇到问题
【发布时间】：2017-11-16 04:01:04
【问题描述】：

我已经让视频响应式了，但是正如你所看到的，当浏览器完全拉伸时，宽高比是相反的。 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>

【问题讨论】：

我没有发现任何问题，它的功能似乎与您想要的完全一样。另外，下次改用 sn-ps。
代码在浏览器中运行时，视频放置在容器中文本的右侧。出于某种原因，在 sn-p 中，它会在文本下方显示视频。我想知道如何将视频放在右侧文本旁边的同一行中。
是的，也没有问题...有什么问题？
您没有向我们展示相关的 CSS。请更新您的问题以显示控制列/行布局的 CSS。
我展示了我所有的代码。我很肯定没有别的了。我用图片更新了帖子。

标签： html css

【解决方案1】：

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

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

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

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

.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。

希望我做对了:)

【讨论】：

出于某种原因，这对我不起作用。它只是让视频消失了。
奇怪...它完全在顶部工作：screenshots.firefoxusercontent.com/images/…。您是否像我一样删除了 .video-responsive 样式？
啊，我什至没看到。我刚刚尝试过，但它让我离开了我刚开始的地方。视频不再响应。
响应式？你是什么意思？您是否尝试在其上设置相对宽度或高度？