Масштабировать и переместить iframe как размер фона: обложка

Ответ 1

Как и в случае с ответом Альваро Менендеза, кредит должен перейти к этому ответу stackoverflow.com/a/29997746/3400962 от Qwertman. Я получил до тех пор, пока не использовал трюк "padding percent", но этот ответ умным использованием единиц видового экрана имеет решающее значение для этой работы.

Ключом к реализации этого поведения является обеспечение двух вещей:

• То, что iframe всегда поддерживает тот же формат изображения, что и его видеоконтент 16: 9. Это обеспечит отсутствие черной "прокладки" вокруг внешней стороны видео.
• То, что 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>

Ответ 2

Ok. Заслуга не моя, поскольку я получил 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, которое я не думаю, что это возможно, но я могу ошибаться, но я опубликовал этот ответ, потому что он может помочь другим людям с одинаковой проблемой)