如何在不使用 div 的情况下使 iframe 响应？

Question

我从这篇文章 (Making an iframe responsive) 中了解到，例如，通过在 iframe 周围添加一个带有类的容器来使 iframe 响应式，

<div class="intrinsic-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
</div>

是否可以在我的帖子中直接嵌入<iframe>...</iframe>（不使用<div>...</div>）？我尝试了这些解决方案，但都不起作用。

PS：我在 WordPress 中使用两列布局。视频比例可以是16:9（来自YouTube）、4:3（来自腾讯）等。这里是临时的demo。

Answer 1

如果您可以使用无需额外包装元素即可使用的视口单元。

整页宽度：

iframe {
  width: 100vw;
  height: 56.25vw; /*16:9*/
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>

半页宽：

iframe {
  width: 50vw;
  height: 28.125vw; /*16:9*/
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>

Answer 2

这里的关键是你要保持的高宽比。我冒昧地使用 jQuery 而不是 javascript 来做到这一点。代码在单击按钮时触发。它计算 iframe 的宽度和高度比并适应您的需求（在这种情况下，我假设您希望它填充容器宽度）。

如果您在一页上有多个视频，您可能希望循环播放所有视频并在窗口调整大小和页面加载时运行代码。

这里是JSFiddle

希望对你有帮助:)

html

<iframe id="iframe" width="640" height="360" src="https://www.youtube.com/embed/4SDVkdcO8ts" frameborder="0" allowfullscreen></iframe>
<button id="button" style="float: left">Click me!</button>

jQuery

$(document).ready(function(){
  $("button").click(function(){
    var ratio = $("#iframe").height() / $("#iframe").width();
    $("#iframe").width("100%");
    var newWidth = $("#iframe").width();
    $("#iframe").width(newWidth);
    $("#iframe").height(newWidth*ratio);
    $("button").text("resize the window and click me again!");
  });
});

Answer 3

使用引导类使 iframe 响应。

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" allowfullscreen
            src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" >
    </iframe>
</div>