iframe отказывается быть отзывчивым внутри контейнера div

Question

Я пытаюсь сделать iframe отзывчивым внутри div, есть много ресурсов в Интернете о том, как это сделать, но общее решение не работает для моего дела для видеороликов YouTube ,

Я использую коаксиальную систему скелета CSS. У меня есть вложенная структура div так:

<div class="container"> 
    <div class="row item"> 
     <div class="six columns"> 
      <iframe> </iframe> 
     </div> 
     <div class="six columns"> 
      <iframe> </iframe> 
     </div> 
    </div> 
</div> 

iframe были выступающие за пределы правого края содержащего div (класс .six.columns), поэтому я попытался следующие две css стратегии (ниже).

Однако, с каждой из этих стратегий, стали огромными, и, похоже, приняли на ширину .containerdiv (или, возможно, .rowdiv), вместо непосредственного родителя, в .six.columnsdiv.

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

и

div.six.columns iframe { 
    position: absolute; 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

Я просто хочу, чтобы ответно поместиться внутри .six.columnsdiv. Как я могу это достичь?

Answer 1

Установите контейнер на position:relative, чтобы работать с absolute.

Чтобы сохранить соотношение сторон видеоизображения, оберните iframe в другой div и используйте трюк padding. Предположим, что видеоролик 16:9, значение padding-bottom будет 9/16=56.25%. Простая демонстрация.

https://jsfiddle.net/dfkhkLhp/

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

<div class="youtube"> 
 
    <iframe src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe> 
 
</div>