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

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

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

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/ (фрагмент не показывает видео, см. fiddle)

к счастью, в вашем случае вы хотите, чтобы видео соответствовало всему экрану, поэтому единицы просмотра могут использоваться для расчета соотношения сторон вместо процентов. Это позволяет использовать для расчета 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/ (фрагмент не показывает видео, см. fiddle)

блоки Viewport широко поддержаны, так как вы не ориентируетесь на старые браузеры, это метод должен работать.