Question

我的网站看起来很棒...直到我更改分辨率或浏览器，突然之间YouTube视频滑稽地不成比例。其他一切都很好，我根本无法进行扩展。我尝试将它们设置为百分比但是它们只是缩放到最近的容器（视频），它也拒绝按高度按比例缩放。

<aside id="video">
<iframe src="https://www.youtube.com/embed/-i3mX0YRrjM" width="320" height="190"></iframe>
</aside>

#video {
margin: auto;
width:320px;
height:190px;
box-shadow: 15px 15px 10px rgba(0,0,0,0.8);
}

Answer 1

<div id="container">
<aside id="video">
<iframe src="https://www.youtube.com/embed/-i3mX0YRrjM" width="320" height="190"></iframe>
</aside>
</div>

#container {
margin:auto;
width:50%;
}

#video {
margin:auto;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
box-shadow: 15px 15px 10px rgba(0,0,0,0.8);
}
#video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

只需调整CSS中的#container宽度即可调整大小。

Answer 2

我记得，如果只指定高度或宽度，则另一个将调整为比例。如果同时指定两者，则不会。

如果您将上面的代码调整为，例如，仅指定对象的宽度...高度是否自动缩放以满足您的需求？

如何扩展我的嵌入式YouTube iframe？

2 个答案: