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

Posted 2023-03-05

【中文标题】如何在不使用 div 的情况下使 iframe 响应？

【英文标题】：How do I make iframes responsive without using div?

【发布时间】：2017-07-18 13:08:59

【问题描述】：

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

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

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

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

【参考方案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>

【讨论】：

我在 WordPress 中使用了两列布局。那么，我需要将width 设置为（100vw - 侧边栏的宽度）？但是侧边栏在桌面和移动平台上的显示方式不同。这是demo。

另一个问题：视频的比例并不总是 16:9。其他平台部分视频默认为width="640" height="498"（比例为4:3）。

@sparkandshine 是否将#primary 和#secondary 都转换为vw，并计算iframe 的大小或仅使用div 包装它更容易，这取决于您。对于 16:9 与 4:3 的比例，听起来使用带有类的包装器是最简单的方法。

非常感谢。我尝试使用包装器，但遇到了新问题。我邀请你回答我的新问题，Responsive iframe for different aspect ratio。

【参考方案2】：

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

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

这里是JSFiddle

希望对你有帮助:)

html

<iframe id="iframe"   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!");
  );
);

【参考方案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>

【讨论】：

使用 Bootstrap 就像拿大锤敲碎坚果

更不用说 OP 专门说“不使用 div” - 我遇到这个是因为客户有在整个地方丢弃 iframe 的习惯。我不能告诉客户将它包装在一个 div 中。同样，也许 OP 会问，因为我们只能准备 CSS。没有标记修改。没有js。只是 CSS。