在 iframe 中制作响应式视频答案

【问题标题】：Making video in Iframe responsive在 iframe 中制作响应式视频
【发布时间】：2016-02-23 12:55:39
【问题描述】：

我有一个 Wordpress 站点，其中放置了一个 iframe。在这个 iframe 中，我正在流式传输视频。这一切都很好，但是当我在我的 Iphone（不是 android）上尝试该网站时，iframe 有一个 huuuuge 宽度。我试过了：

width: auto;

这不会产生任何结果。

网站是http://www.bubbels-lelystad.nl/broadcast-live/，我使用的代码是：

< iframe src="http://client.branchechannel.com/?id=0ff39bbbf981ac0151d340c9aa40e63e" frameborder="0" style="border: 0; width: 1100px; height: 600px;"></iframe>

【问题讨论】：

基本上，您不能使 IFrame 中的内容具有响应性。编码视频的人将需要实现响应式框架。您可以让 IFrame 自动响应，但除非您打算使用 Javascript，否则您不能更改其中的代码。

标签： php html iframe

【解决方案1】：

 <div class = "video-container">
<iframe src="http://client.branchechannel.com/?id=0ff39bbbf981ac0151d340c9aa40e63e" height="600px" width="1100px" allowfullscreen="" frameborder="0">
</iframe>
</div>

iframe 是不适合响应式布局的 html 元素之一。嵌入内容的最佳方式是对其进行包装。

这是 CSS：你可以根据自己的喜好调整它，但它似乎适应不同的屏幕尺寸

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

padding-bottom/top 你可以根据自己的喜好进行调整。这是基于视频的纵横比。

【讨论】：