YouTube iFrame отключен элементом заголовка в другом контейнере Div

Question

У меня есть контейнер div, содержащий несколько видеороликов iFrame на YouTube.Ниже у меня есть другой контейнер div, и я заметил, что элемент h2 в этом другом контейнере div отключает адаптацию всех видео iFrame Youtube в предыдущем контейнере (воспроизводимых).

Видео YouTube должны быть в контейнерах столбцов с размером рамки в рамке.

Ссылка CodePen (поскольку переполнение стека не загружается в iFrames) https://codepen.io/they102/pen/oVgRVM

.container {

  position: relative;
  margin: 30px auto;
  width: 60%;
  min-width: 300px;
  height: auto;
  font-family: sans-serif;

}

.row {

  margin: 0 -5px;
  margin-bottom: 50px;


}

.column {

  width: 50%;
  float: left;
  padding: 10px;
  box-sizing: border-box;
  height: auto;

}

.iFrameCard {

  background-color: #f1f1f1;
  height: auto;
  color: black;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.iFrameCard iframe {

  display: block;
}

.iFrameLabel {

  vertical-align: middle;
  height: 50px;
  line-height: 50px;
  display: block;
}

.iFrameLabel h3 {

  margin: 0;
  padding: 0;

}

@media screen and (max-width: 1000px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

<div class="container">
		<div class="row">
			<div class="column">
				<div class="iFrameCard">

					<iframe width="100%" height="auto" src="https://www.youtube.com/embed/lLWEXRAnQd0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
					
				</div>


			</div>
			<div class="column">
				<div class="iFrameCard">

					<iframe width="100%" height="auto" src="https://www.youtube.com/embed/lLWEXRAnQd0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
					
				</div>
    </div>
	</div>
</div>
	<div class="container">

		<h2><b><i><u>H Element Disabler</u></i></b></h2>
	
		</div>

Answer 1

Внутри каждого .container div, вы плаваете .column, и это float необходимо очистить.Не снимая флажок, float по существу сводит кликабельную область родительского элемента к ничему .Самое простое решение - добавить следующую строку:

.container {
  …
  clear: left;
}

Answer 2

Give float: left или display: inline-block;в .контейнер класса.

.container {

  position: relative;
  margin: 30px auto;
  width: 60%;
  min-width: 300px;
  height: auto;
  font-family: sans-serif;
  display:inline-block;

}

or

.container {

  position: relative;
  margin: 30px auto;
  width: 60%;
  min-width: 300px;
  height: auto;
  font-family: sans-serif;
 float:left;

}