css - 如何为自适应iframe添加最大宽度？

我已经拼凑了this little fiddle here，我对视觉效果感到满意。目标是制作一个中心响应视频iframe。

但是我一直无法找到增加1920px最大宽度的好方法。
如果您有完整的高清视频，最好不要将其放大。

如果我的CSS可以改进，请不要犹豫。

<div class="container">
    <div class="embed-responsive">
         <iframe width="640" height="360" src="https://player.vimeo.com/video/176131682?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>


html, body {
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;

}
.embed-responsive {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    margin-top: -28.1%;
    /* video height / video width */
    padding-bottom: 56.2%;
    height: 0;
    overflow: hidden;
}
.embed-responsive iframe {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    margin: auto;
}

最佳答案

您基本上可以按原样保留iframe的属性，然后将最大宽度添加到容器中。您需要将其位置更改为相对，并使其成为块级元素，以确保其居中。见下文：

.embed-responsive {
    position: relative;
    display:block;
    margin:0 auto;
    width: 100%;
    max-width:1920px;
    padding-bottom: 56.25%;
    top: 50%;
    transform:translateY(-50%)
}
.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 100%;
}

字段：https://jsfiddle.net/2nu817d9/21/