Перетяжка дно с максимальной высотой

Question

Вот HTML:

<div class="container"> 
    <div class="wrapper"> 
     <iframe src="...."></iframe> 
    </div> 
</div> 

Обертка DIV имеет CSS: положение: относительная; ширина: 100%; высота: 100%; высота: 0; padding-bottom: 56,25%; переполнение: скрыто;

IFrame имеет CSS:

position: absolute; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
border: 0; 

Контейнер имеет УС:

position: relative; 
width: 100%; 
height: 100%; 
display: flex; 
flex-direction: column; 
justify-content: center; 
margin: 0 auto; 
top: 50%; 
transform: translateY(-50%); 
max-width: 1280px; 
max-height: 720px; 

Я пытаюсь защитить соотношение сторон 16: 9 фрейма как окно изменяет размер, а также поддерживать максимальная высота для него 100% - 67px calc (100% - 67px). Как я могу сделать эти два одновременно?

Answer 1

Предполагая, что вы не хотите поддерживать старые браузеры, которые можно использовать:

height: calc(100% - 67px); 

И применить это к контейнеру.

Answer 2

Вместо того, чтобы использовать отступы, чтобы установить высоту, установить высоту по ширине окна просмотра:

height: 56.25vw; /* 16:9 */ 

Вы можете установить максимальную высоту-то, что вам нравится.

Answer 3

У меня была та же проблема. Закончилось создание другой оболочки для оболочки, чтобы получить эффект от обоих.

Внутренняя обертка гарантирует, что соотношение сторон сохраняется, так как значение заполнения-днища масштабируется по ширине. Iframe заполняет контейнер, а внешняя оболочка обеспечивает максимальную ширину, так что она перестает расширяться после 865px.

.video-wrapper-wrapper { 
    max-width: 865px; 
    margin: auto; 

    .video-wrapper { 
     position: relative; 
     width: 100%; 
     height: 0; 
     padding-bottom: 82%; 

     iframe { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      left: 0; 
      top: 0; 
     } 
    } 
}