Адаптивные видеофрагменты (сохраняя соотношение сторон) только с CSS?

Я обычно использую решение, подобное этому. Что-то вроде:

.wrapper {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 33%;
}
.wrapper iframe {
   position:absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
}

Но на этот раз у меня нет доступа к коду HTML или JavaScript, поэтому я не могу использовать оболочку для предотвращения height:0.

Есть ли способ сделать iframe отзывчивым (и сохранить соотношение) только с помощью CSS?

Пробовал это (работает с iframe, но не с его содержанием):

iframe {
    width: 100%;
    background: red;
    height: 0;
    padding-bottom: 33%;    
}

скрипку

есть идеи? Нет необходимости поддерживать старые браузеры, так что даже решение CSS3 было бы замечательно.

Ответы

Ответ 1

Используйте новые узлы просмотра CSS vw и vh (ширина/высота видового экрана)

FIDDLE

iframe {
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
    background:red;  
}

Поддержка браузера также хороша: IE9 + (caniuse)

Ответ 2

Вот скрипка для решения, основанного на секрете CSS2: https://jsfiddle.net/59f9uc5e/2/

<div class="aspect-ratio">
  <iframe src="" width="550" height="275" frameborder="0"></iframe>
</div>

<style>
/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 25:14 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* The height of the item will now be 56.25% of the width. */
}

/* Adjust the iframe so it rendered in the outer-width and outer-height of it parent */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
</style>

Это объясняется тем, как обрабатываются процентные значения для заполнения:

Процент рассчитывается относительно ширины сгенерированного блока, содержащего блок, даже для "padding-top" и "padding-bottom".

https://www.w3.org/TR/CSS2/box.html#padding-properties

Ответ 3

Функция Calc делает ее намного более читабельной:

.iframe-video {
    width: 755px;
    height: 424px;
    max-width: 100%;
    max-height: calc((100vw - 40px) / (16/9));
}

width и height - это размер для рабочего стола, а также запасной вариант для древних браузеров
40px является полем (20 пикселей между рамкой iframe и рамкой области просмотра с обеих сторон)
16/9 - это соотношение видео (если у вас проигрыватель от края до края)

Ответ 4

Это своего рода хакерство, однако вы можете использовать изображения для сохранения пропорций видео. Например, я пошел рисовать и сохранил изображение с разрешением 1280 x 720 для соотношения сторон 16: 9 (здесь я просто возьму пустое изображение из Интернета где-нибудь).

Это работает, потому что если вы измените ширину изображения, оставив высоту автоматически, наоборот, изображение будет автоматически масштабироваться - сохраняя пропорции.

img {
  display: block;
  height: auto;
  width: 100%;
}
iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.wrapper {
  float: left;
  position: relative;
}

<div class="wrapper">
  <img src="http://www.solidbackgrounds.com/images/1280x720/1280x720-ghost-white-solid-color-background.jpg" alt=""/>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>