我有一个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>
<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%;
}
底部/顶部填充，您可以根据自己的喜好进行调整。这是基于视频的纵横比。