缩放和重新定位iframe像background-size：cover [英] Scale and reposition iframe like background-size: cover

问题描述

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>

在snippets结果中得到cookie同源错误，这里是一个镜像：

As I get a cookies same origin error in the snippets result, here is a mirror:

https://jsfiddle.net/07Lffw5x/2/embedded/result/

[edit]也许这是一个更好的演示，如果你比较这一个，没有太大的区别...为什么？ [/ edit]

[edit] Maybe this is a better demo, if you compare to this one, there is not much difference... why? [/edit]

我想为iframe重现背景大小的封面。

I'm trying to reproduce a background-size cover for an iframe.

事情是，它似乎重新缩放视频，只有更大的尺寸，

The thing is that it seems to rescale the video, for bigger sizes only,

问题，

对每个断点生效？

推荐答案

类似Alvaro Menendez的回答，信用需要去这个答案stackoverflow.com/a/29997746/3400962通过Qwertman。

实现的关键在于使用填充百分比技巧，这种行为是确保两件事情：

The key to implementing this behaviour is to ensure two things:

1. iframe 这将确保视频外部周围没有黑色padding。


2. iframe 始终根据视口的大小填充 height 或 width

1. That the iframe always maintains the same aspect ratio as its video content 16 : 9. This will ensure that no black "padding" is present around the outside of the video
2. That the iframe always fills the height or width depending on the size of the viewport

维护元素长宽比的一种方法是使用padding percentagetrick ，它利用了 top 和 bottom padding 使用元素的 width 作为其值的基础。使用公式B /（A / 100）= C％，我们可以计算填充所需的百分比。给定视频具有16:9的比率，这转换为9 /（16/100）= 56.25。

One way to maintain the aspect ratio of an element is to use the "padding percentage" trick which takes advantage of the fact that top and bottom padding uses the width of the element as the basis for their value. Using the formula B / (A / 100) = C% we can calculate the required percentage for the padding. Given the video has a 16 : 9 ratio this translates to 9 / (16 / 100) = 56.25.

唯一的问题是，在你的情况下，计算是必需的水平和垂直轴（因为我们不知道视口将是什么尺寸），这个技巧将不能使用左和右 以获得与高度相关的宽高比。

The only problem is that in your case the calculation is required for both the horizontal and vertical axis (as we don't know what dimensions the viewport will be) and this trick will not work with left and right padding to get the aspect ratio in relation to the 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/ （代码段不显示视频，请参阅小提示）

https://jsfiddle.net/w45nwprn/ (Snippet doesn't show video, please see fiddle)

幸运的是，在你的情况下，你想要的视频适合整个屏幕，所以视口单位可以用于计算宽高比，而不是百分比。这允许使用计算与 height 相关的 width ，反之亦然：

Luckily, in your case you want the video to fit the entire screen so viewport units can be used to calculate the aspect ratio instead of percentages. This allows use to calculate the width in relation to the height and vica versa:

• left：50％; ， top：50％; > > <$ c $>> transform：translate（-50％，-50％）; c $ c> .container


• min-height：100％; > min-width：100％; 是确保 height 和 width 不会小于 .container


• height：56.25vw; 将相对于视口的 width 设置 height 。这是通过执行9 /（16/100）= 56.25


• width：177.77777778vh; c> width 相对于视口的 height 。这是通过执行16 /（9/100）= 177.77777778

• left: 50%;, top: 50%; and transform: translate(-50%, -50%); are required to center the iframe in .container
• min-height: 100%; and min-width: 100%; are required to ensure that the height and width are never smaller than that of .container
• height: 56.25vw; will set the height in relation to the width of the viewport. This is calculated by doing 9 / (16 / 100) = 56.25
• width: 177.77777778vh; will set the width in relation to the height of the viewport. This is calculated by doing 16 / (9 / 100) = 177.77777778

计算的。 height 和 width 不能低于 100％，但必须保持正确的长宽比，覆盖整个视口。

Because the height and width can never be below 100% but the must remain in the correct aspect ratio the video will always cover the whole 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/ （代码段不显示视频，请参阅小提示）

https://jsfiddle.net/qk00ehdr/ (Snippet doesn't show video, please see fiddle)

广泛支持视口单元，因此只要您不定位旧浏览器，此方法就可以正常工作。

Viewport units are widely supported, so as long as you are not targeting old browsers this method should work.

这篇关于缩放和重新定位iframe像background-size：cover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！