Question

我有一个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>

Answer 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你可以根据自己的喜好进行调整。这是基于视频的宽高比。

在Iframe中制作视频响应

1 个答案: