缩放和重新定位iframe,如background-size:cover

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>

当我在片段结果中得到一个cookie相同的原始错误时,这里是一个镜像:

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

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

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

事情是它似乎重新缩放视频,仅适用于更大的尺寸,

题,

重新划分可以在每个断点生效吗？或者vimeo玩家可能会自己重新缩放？

Answer 1

类似于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 {
    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不显示视频,请看小提琴)

幸运的是,在您的情况下,您希望视频适合整个屏幕,因此视口单元可用于计算宽高比而不是百分比.这允许使用来计算width相对于height和正相反:

• left: 50%;,top: 50%;和transform: translate(-50%, -50%);需要居中iframe在.container
• 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/(Snippet不显示视频,请看小提琴)

视口单元受到广泛支持,因此只要您不针对旧浏览器,此方法就可以正常工作.

Answer 2

好.当我在这里得到jquery时,优点不是我的

我记得那个问题,因为我在我的一个旧项目中使用它,我想检查它是否与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解决方案,我认为这不可能,但我可能是错的,但我已经发布了这个答案,因为它可以帮助其他人有同样的问题)