html - 将嵌入式视频放在文本旁边的最佳方式

Question

我曾多次尝试这样做，但总不能完全正确。我希望视频在浏览器缩小时响应并最终在浏览器变得足够小时堆叠，就像我放入 Bootstrap 网格中的图像一样，但我无法弄清楚如何使用嵌入式视频执行此操作。这是我的 html。我真的需要 CSS 方面的帮助。

<section class="section1">
  <div class="container-fluid">
    <div class="row section1Row">
      <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="672" height="378" src="https://www.youtube.com/embed/bsY2GdBEvSA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</section>

Answer 1

要获得响应式设计，您需要使用 CSS 媒体查询:using media queries - MDN .另外，请阅读完整的 Google Web Fundamentals course , 这会有所帮助。

长话短说

1. 选择您的断点 ( choosing breakpoint ):
   • 不要为断点使用流行的屏幕尺寸
   • 选择内容驱动的断点
2. 使用 CSS @media (max-width: 800px) { ... }
   • 目标媒体类型 ( media types ) 或功能 ( media features )
   • 测试媒体查询:testing media queries - MDN
3. 搞乱 flex-direction: row