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/

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

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

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

问题，

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

Answer 1

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

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

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

维持元素宽高比的一种方法是使用"padding percentage" trick，利用top和bottom padding使用{{1}的事实元素作为其价值的基础。使用公式B /（A / 100）= C％，我们可以计算填充所需的百分比。鉴于视频的比例为16：9，这相当于9 /（16/100）= 56.25。

唯一的问题是，在你的情况下，水平和垂直轴都需要计算（因为我们不知道视口将是什么尺寸），这个技巧不适用于width和{ {1}} left获取与right相关的宽高比。

padding

height

https://jsfiddle.net/w45nwprn/（代码段不显示视频，请参阅小提琴）

幸运的是，在您的情况下，您希望视频适合整个屏幕，因此可以使用视口单元来计算宽高比而不是百分比。这允许用来计算与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>，反之亦然：

width，height和left: 50%;需要将top: 50%;置于transform: translate(-50%, -50%);
iframe和.container必须确保min-height: 100%;和min-width: 100%;永远不会小于height
width会将.container设置为视口的height: 56.25vw;。这是通过9 /（16/100）= 56.25
height会将width设置为视口的width: 177.77777778vh;。这是通过16 /（9/100）= 177.77777778

由于width和height永远不会低于height，但必须保持正确的宽高比，视频将始终覆盖整个视口。

width

100%

https://jsfiddle.net/qk00ehdr/（代码段不显示视频，请参阅小提琴）

Viewport units are widely supported，因此只要您不定位旧浏览器，此方法就可以使用。

Answer 2

确定。当我得到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解决方案，我不认为这是可能的，但我可能是错的，但我已经发布了这个答案，因为它可以帮助其他人有同样的问题）

缩放和重新定位iframe，如background-size：cover

2 个答案: