在div中制作iframe响应

Question

我正在尝试让iframe对所有屏幕都有响应。

  <div class="iframe-class">
    <iframe src="https://www.youtube.com/embed/PZEwPJzMKGg"></iframe>
  </div>

Answer 1

使用Bootstrap 3.2，您可以将每个iframe包装在您选择的response-embed包装中：

http://getbootstrap.com/components/#responsive-embed

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

参考： Responsive iframe using Bootstrap

Answer 2

试试这个：

  <!-- 16:9 aspect ratio -->
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PZEwPJzMKGg"></iframe>
  </div>

  <!-- 4:3 aspect ratio -->
  <div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PZEwPJzMKGg"></iframe>
  </div>

Answer 3

使iframe对所有屏幕都有响应

这对你肯定有用。

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PZEwPJzMKGg"></iframe>
  </div>

Refrence Link