html,body {
height: 100%;
margin: 0;
padding: 0;
}
.sized {
height: 100%;
position: relative;
background: #eee;
overflow:hidden;
padding:0;
}
.sized iframe {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
@media (min-width: 320px) {
height: 200%;
top: -50%;
}
@media (min-width: 640px) {
height: 180%;
top: -40%;
}
<div class="sized"> <iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> <h3>Original video</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/
可能this是一个更好的演示，如果你比较this one，没有太大的区别…为什么？ [/编辑]
我正在尝试重现一个iframe的背景大小的封面。
事实是，似乎重新缩放视频，只有更大的尺寸，
题，
可以在每个断点上生效吗？或者vimeo播放器可能会重新缩放它自己呢？
解决方法
实现这一行为的关键是确保两件事情：
> iframe总是保持与其视频内容16：9相同的宽高比。这将确保视频外部不存在黑色“padding”
> iframe根据视口的大小总是填满高度或宽度
保持元素宽高比的一种方法是使用“padding percentage” trick，它利用顶部和底部填充使用元素的宽度作为其值的基础。使用公式B /(A / 100)= C％，我们可以计算填充所需的百分比。鉴于视频的比例为16：9，转换为9 /(16/100)= 56.25。
唯一的问题是，在你的情况下，水平轴和垂直轴都需要计算(因为我们不知道视口将是什么尺寸)，而这个技巧将不能用左右的填充来获得宽高比关系到身高。
html,body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background: #eee;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
.inner {
left: 50%;
min-height: 43.75%;
padding-top: 56.25%;
position:absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
.container iframe {
bottom: 0;
height: 100%;
left: 0;
position:absolute;
right: 0;
top: 0;
width: 100%;
}
<div class="container">
<div class="inner">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
https://jsfiddle.net/w45nwprn/(片段不显示视频，请参阅小提琴)
幸运的是，在您的情况下，您希望视频适合整个屏幕，因此视口单位可用于计算宽高比而不是百分比。这允许用于计算相对于高度的宽度，反之亦然：
>左：50％;上：50％;并转换：翻译(-50％，-50％);需要将iframe放在.container中
> min-height：100％;和最小宽度：100％;需要确保高度和宽度不会小于.container的高度和宽度
> height：56.25vw;将设置与视口宽度相关的高度。这是通过做9 /(16/100)= 56.25来计算的
> width：177.77777778vh;将设置与视口高度相关的宽度。这是通过做16 /(9/100)= 177.77777778计算的
因为高度和宽度永远不能低于100％，而是必须保持正确的长宽比，视频将始终覆盖整个视口。
html,body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background: #eee;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
iframe {
Box-sizing: border-Box;
height: 56.25vw;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
width: 177.77777778vh;
}
<div class="container">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
https://jsfiddle.net/qk00ehdr/(片段不显示视频，请参阅小提琴)
Viewport units are widely supported，所以只要你不是针对旧的浏览器，这个方法应该工作。
