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

Question

我曾多次尝试这样做，但却无法做到这一点。我希望视频在浏览器缩小时响应，并在浏览器变得足够小时最终堆叠，就好像它是我放入引导网格的图像，但我无法弄清楚如何使用嵌入式视频执行此操作。这是我的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，它会有所帮助。

TL; DR

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