像背景尺寸一样缩放和重新定位 iframe:cover [英] Scale and reposition iframe like background-size: cover

查看：31
本文介绍了像背景尺寸一样缩放和重新定位 iframe:cover的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

html, body {高度:100%；边距:0；填充:0；}.size {高度:100%；位置:相对；背景:#eee;溢出:隐藏；填充:0;}.size iframe {位置:绝对；左:0；顶部:0；宽度:100%；高度:100%；}@media(最小宽度:320px){高度:200%；顶部:-50%；}@media(最小宽度:640px){高度:180%；顶部:-40%；}

<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>

当我在代码段结果中遇到 cookie 同源错误时，这里是一个镜像:

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

[edit] 如果与 this 是更好的演示.net/07Lffw5x/5/">这个，没有太大区别...为什么?[/编辑]

我正在尝试为 iframe 重现背景大小的封面.

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

问题，

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

解决方案

类似于 Alvaro Menendez 的回答，信用需要转到 Qwertman 的这个回答 stackoverflow.com/a/29997746/3400962.我已经使用了填充百分比"技巧，但是这个答案巧妙地使用了视口单位对于这项工作至关重要.

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

  1. iframe 始终保持与其视频内容相同的纵横比 16 : 9.这将确保视频外部不存在黑色填充"
  2. iframe 总是根据视口的大小填充 height 或 width

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

唯一的问题是，在您的情况下，水平轴和垂直轴都需要计算(因为我们不知道视口的尺寸是多少)并且此技巧不适用于 left 和 right padding 以获取与 height 相关的纵横比.

html, body {高度:100%；边距:0；填充:0；}.容器 {背景:#eee;高度:100%；溢出:隐藏；填充:0；位置:相对；}.内{左:50%；最小高度:43.75%；填充顶部:56.25%；位置:绝对；顶部:50%；变换:翻译(-50%，-50%)；宽度:100%；}.container iframe {底部:0；高度:100%；左:0；位置:绝对；右:0；顶部:0；宽度:100%；}

<div class="inner"><iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

https://jsfiddle.net/w45nwprn/(片段不显示视频，请看小提琴)

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

  • left: 50%;, top: 50%; 和 transform: translate(-50%, -50%);需要在 .container
    • 中将 iframe 居中
  • min-height: 100%; 和 min-width: 100%; 需要保证 height 和 宽度 永远不会小于 .container
  • height: 56.25vw; 将相对于视口的width 设置height.这是通过做 9/(16/100) = 56.25 来计算的
  • width: 177.77777778vh; 将相对于视口的height 设置width.这是通过做 16/(9/100) = 177.77777778 来计算的

因为 height 和 width 永远不能低于 100% 但必须保持正确的纵横比，视频将始终覆盖整个视口.

html, body {高度:100%；边距:0；填充:0；}.容器 {背景:#eee;高度:100%；溢出:隐藏；填充:0；位置:相对；}iframe {box-sizing: 边框框；高度:56.25vw；左:50%；最小高度:100%；最小宽度:100%；变换:翻译(-50%，-50%)；位置:绝对；顶部:50%；宽度:177.77777778vh；}

<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

https://jsfiddle.net/qk00ehdr/(片段不显示视频，请看小提琴)

视口单位得到广泛支持，因此只要您不针对旧浏览器方法应该有效.

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>

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

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

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

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,

Question,

Can the rescales take effect on every breakpoint? or the vimeo player might rescale by it's own anyway?

解决方案

Similar to Alvaro Menendez's answer, credit needs to go to this answer stackoverflow.com/a/29997746/3400962 by Qwertman. I got as far as using the "padding percentage" trick, but this answer's clever use of viewport units is crucial to this working.

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

  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

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/ (Snippet doesn't show video, please see fiddle)

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%; 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

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/ (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:cover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆