像背景大小一样缩放和重新定位 iframe：封面

Posted 2023-03-05

【中文标题】像背景大小一样缩放和重新定位 iframe：封面

【英文标题】：Scale and reposition iframe like background-size: cover

【发布时间】：2016-01-31 19:02:41

【问题描述】：

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>

当我在 sn-ps 结果中收到 cookie 同源错误时，这是​​一个镜像：

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

[编辑] 也许this 是一个更好的demo，如果你和this one 相比，差别不大……为什么？ [/编辑]

我正在尝试为 iframe 复制背景大小的封面。

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

问题，

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

【问题讨论】：

我不完全清楚你的要求，你想保持iframe 的纵横比正确，这样就没有黑条了吗？您能否提供一张准确显示您所追求的图像的图片，这可能有助于澄清事情。

有一个sn-p。它不适合你吗？ （但去除黑色空间比完美的纵横比更重要）

sn-p 有效，但我不是 100% 清楚您想要的结果是什么。检查我是否在正确的路线上，这是你所追求的吗？ jsfiddle.net/ysgsaqs8

我需要和你一样的，有固定的高度。有什么想法吗？谢谢！ （这就是为什么我认为我们需要重新调整和重新定位）

对，我想我明白了，所以您希望视频填满整个iframe，而不是拉伸视频，而是希望截断部分视频（如果需要）？跨度>

【参考方案1】：

好的。优点不是我的，因为我得到了 jquery here

当我在一个旧项目中使用它时，我记得这个问题，我想检查它是否可以与 iframe 一样工作。确实如此。

基本上用这个css：

.container 
    position: absolute;
    top: 0;
    overflow: hidden;

还有这个 jquery：

var min_w = 300; // minimum video width allowed
var vid_w_orig;  // original video dimensions
var vid_h_orig;

jQuery(function()  // runs after DOM has loaded

    vid_w_orig = parseInt(jQuery('iframe').attr('width'));
    vid_h_orig = parseInt(jQuery('iframe').attr('height'));

    jQuery(window).resize(function ()  resizeToCover(); );
    jQuery(window).trigger('resize');
);

function resizeToCover() 

    // set the video viewport to the window size
    jQuery('.container').width(jQuery(window).width());
    jQuery('.container').height(jQuery(window).height());

    // use largest scale factor of horizontal/vertical
    var scale_h = jQuery(window).width() / vid_w_orig;
    var scale_v = jQuery(window).height() / vid_h_orig;
    var scale = scale_h > scale_v ? scale_h : scale_v;

    // don't allow scaled width < minimum video width
    if (scale * vid_w_orig < min_w) scale = min_w / vid_w_orig;;

    // now scale the video
    jQuery('iframe').width(scale * vid_w_orig);
    jQuery('iframe').height(scale * vid_h_orig);
    // and center it by scrolling the video viewport
    jQuery('.container').scrollLeft((jQuery('iframe').width() - jQuery(window).width()) / 2);
    jQuery('.container').scrollTop((jQuery('iframe').height() - jQuery(window).height()) / 2);
;

你得到这个：JSFIDDLE

（我知道您正在寻找一个纯 css 解决方案，我认为这是不可能的，但我可能是错的，但我发布了这个答案，因为它可以帮助其他有同样问题的人）

【讨论】：

我害怕找不到 CSS 解决方案，我会给予赏金它的时间，但这似乎是要走的路！ （不是插件或任何东西，看起来不错！）。似乎诀窍是使用 scrollLeft 和 scrollTop，而不是 left & top！

在我发布这个脚本的同一个链接中，有一些 css 解决方案。我刚刚检查过它们，但我认为没有一个可以与 iframe 一起使用，但再次......我可能错了。我没有时间自动取款机来检查它们。也许你想试试看。

【参考方案2】：

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

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

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

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

唯一的问题是，在您的情况下，水平轴和垂直轴都需要计算（因为我们不知道视口的尺寸），并且此技巧不适用于 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/（片段不显示视频，请看小提琴）

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

left: 50%;、top: 50%; 和 transform: translate(-50%, -50%); 需要在 .container 中居中 iframe 需要min-height: 100%; 和min-width: 100%; 以确保height 和width 永远不会小于.container height: 56.25vw; 将设置height 相对于视口的width。这是通过计算 9 / (16 / 100) = 56.25 width: 177.77777778vh; 将设置width 与视口的height 相关。这是通过执行 16 / (9 / 100) = 177.77777778 计算得出的

因为height 和width 永远不会低于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，所以只要你不是针对旧浏览器，这个方法应该可以工作。

【讨论】：

这是巧妙利用css实现的解决方案。虽然我（还）不喜欢使用vw 和hw，但我知道这是未来（而且很接近）。你有我的支持，如果操作不需要太多完整的“有点旧”的浏览器兼容性，你可能会得到赏金。

谢谢@AlvaroMenéndez。在这个和你的回答之间，我认为我们已经很好地解决了托尼的问题。我也没有太多使用视口单元，但看起来它们时不时会派上用场。如果需要 IE8 支持，应该可以检测是否支持视口单元并在必要时切换到 javascript 方法。

现在问题出在我身上，因为我不知道该奖励给谁……哈哈！

没关系。别担心。您接受了应该对您更有效的答案。 Gl 与您的项目

我在 ios 应用程序中有一个自定义大小的 Web 视图，但 iframe 无法正确缩放以适应。这为我做到了。谢谢！