css - 像背景大小 : cover 一样缩放和重新定位 iframe

Question

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 复制背景大小的封面。

问题是它似乎重新缩放了视频，仅适用于更大的尺寸，

问题，

rescales可以在每个断点上生效吗？或者 vimeo 播放器可能会自行重新缩放？

Answer 1

与 Alvaro Menendez 的回答类似，功劳需要转到 Qwertman 的这个回答 stackoverflow.com/a/29997746/3400962。我使用了“填充百分比”技巧，但这个答案对视口(viewport)单位的巧妙使用对这项工作至关重要。

实现此行为的关键是确保两件事:

1. iframe 始终保持与其视频内容相同的宽高比 16:9。这将确保视频外部没有黑色“填充”
2. iframe 始终填充height 或width，具体取决于视口(viewport)的大小

保持元素纵横比的一种方法是使用 "padding percentage" trick它利用了 top 和 bottom padding 使用元素的 width 作为它们的基础的事实值(value)。使用公式 B/(A/100) = C% 我们可以计算出所需的填充百分比。鉴于视频的比例为 16 : 9，这意味着 9/(16/100) = 56.25。

唯一的问题是，在你的情况下，水平轴和垂直轴都需要计算(因为我们不知道视口(viewport)的尺寸是多少)，这个技巧不适用于 left 和 right padding 以获得相对于 height 的纵横比。

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/ (片段不显示视频，请参阅 fiddle )

幸运的是，在您的情况下，您希望视频适合整个屏幕，因此可以使用视口(viewport)单位来计算纵横比而不是百分比。这允许使用计算与 height 相关的 width ，反之亦然:

• left: 50%;, top: 50%; 和 transform: translate(-50%, -50%); 是需要在 .container
中将 iframe 居中
• min-height: 100%; 和 min-width: 100%; 是必需的，以确保 height 和 width 永远不会小于 .container
• height: 56.25vw; 将根据视口(viewport)的宽度 设置高度。这是通过 9/(16/100) = 56.25 计算得出的
• width: 177.77777778vh; 将根据视口(viewport)的高度设置宽度。这是通过 16/(9/100) = 177.77777778 计算得出的

因为 height 和 width 永远不能低于 100% 但必须保持正确的宽高比视频将始终覆盖整个视口(viewport)。

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/ (片段不显示视频，请参阅 fiddle )

Viewport units are widely supported ，所以只要您不针对旧浏览器，此方法就应该有效。