html，正文{
身高：100%；
保证金：0；
填充：0；
}
.尺寸{
身高：100%；
位置：相对位置；
背景：#eee；
溢出：隐藏；
填充：0；
}
.尺寸的iframe{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
}
@介质（最小宽度：320px）{
身高：200%；
前-50%；
}
@介质（最小宽度：640像素）{
身高：180%；
前-40%；
}<；div class=“sized”>；
<；iframe src=”https://player.vimeo.com/video/135335257?autoplay=false“frameborder=“0”webkitallowfullscreen=”“mozallowfullscreen=”“allowfullscreen=”“></iframe>；
</部门>；
<；h3>；原创视频</h3>；
<；iframe src=”https://player.vimeo.com/video/135335257?autoplay=false“frameborder=“0”webkitallowfullscreen=”“mozallowfullscreen=”“allowfullscreen=”“></iframe>当我在代码片段结果中发现cookies同源错误时，下面是一个镜像：
https://jsfiddle.net/07Lffw5x/2/embedded/result/
[编辑]也许这是一个更好的演示，如果与此相比，没有太大区别。。。为什么？[/编辑]
我试图为iframe复制一个背景大小的封面
问题是它似乎重新调整了视频的比例，只适用于更大的尺寸
问题:
重缩放是否可以在每个断点上生效？或者vimeo播放器可能会自己重新缩放
与Alvaro Menendez的答案类似，需要感谢Qwertman提供的这个答案stackoverflow.com/a/29997746/340962。我已经使用了“填充百分比”技巧，但这个答案巧妙地使用了视口单位，这对这项工作至关重要。
实施这种行为的关键是确保两件事：
iframe始终保持与其视频内容16:9相同的纵横比。这将确保视频外部没有黑色“填充”- 根据视口的大小，
iframe始终填充高度或宽度
保持元素纵横比的一种方法是使用“填充百分比”技巧，该技巧利用了顶部和底部填充使用元素的宽度作为其值的基础。使用公式B/（A/100）=C%，我们可以计算填充所需的百分比。如果视频的比例为16:9，则转换为9/（16/100）=56.25
唯一的问题是，在您的情况下，水平轴和垂直轴都需要进行计算（因为我们不知道视口的尺寸），而此技巧不适用于左和右填充以获得与高度相关的纵横比
html，正文{
身高：100%；
保证金：0；
填充：0；
}
.集装箱{
背景：#eee；
身高：100%；
溢出：隐藏；
填充：0；
位置：相对位置；
}
.内部{
左：50%；
最小身高：43.75%；
垫面：56.25%；
位置：绝对位置；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
}
.集装箱框架{
底部：0；
身高：100%；
左：0；
位置：绝对位置；
右：0；
排名：0；
宽度：100%；
}<；div class=“container”>；
<；div class=“内部”>；
<；iframe src=”https://player.vimeo.com/video/135335257?autoplay=false“frameborder=“0”webkitallowfullscreen=”“mozallowfullscreen=”“allowfullscreen=”“></iframe>；
</部门>；
</部门>https://jsfiddle.net/w45nwprn/ （代码片段不显示视频，请参阅fiddle）
幸运的是，您希望视频适合整个屏幕，因此可以使用视口单位来计算纵横比，而不是百分比。这允许使用来计算与高度相关的宽度，反之亦然：
左：50%，前50%和转换：翻译（-50%，-50%）是将iframe置于.container最小高度：100%和最小宽度：100%以确保高度和宽度决不小于容器的高度和宽度高度：56.25vw将根据视口的宽度设置高度。通过9/（16/100）=56.25计算得出宽度：177.7778vh将根据视口的高度设置宽度。通过16/（9/100）=177.7778计算得出
因为高度和宽度永远不能低于100%，但必须保持正确的纵横比，视频将始终覆盖整个视口
html，正文{
身高：100%；
保证金：0；
填充：0；
}
.集装箱{
背景：#eee；
身高：100%；
溢出：隐藏；
填充：0；
位置：相对位置；
}
iframe{
框大小：边框框；
身高：56.25vw；
左：50%；
最小高度：100%；
最小宽度：100%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
最高：50%；
宽度：177.7778VH；
}<；div class=“container”>；
<；iframe src=”https://player.vimeo.com/video/135335257?autoplay=false“frameborder=“0”webkitallowfullscreen=”“mozallowfullscreen=”“allowfullscreen=”“></iframe>；
</部门>https://jsfiddle.net/qk00ehdr/ （代码片段不显示视频，请参阅fiddle）
视口单元受到广泛支持，因此只要您不是针对旧浏览器，这种方法就应该有效