Як зробити відео YouTube на сайті адаптивним?

YouTube video responsive

Потрібно зробити відео адаптивним на телефоні, планшеті, ноутбуці та ПК? Без проблем! Для цього вам знадобиться лише створити CSS клас:

.youtube {
	position: relative;
	padding-bottom: 56.25%; /* задає висоту контейнера для 16:9 (якщо 4:3 — поставте 75%) */
	height: 0;
	overflow: hidden;
  }
  .youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border-width: 0;
	outline-width: 0;
  }

Далі просто вставити цей CSS клас у код HTML:

<p class="youtube">
<iframe src="https://www.youtube.com/embed/IejAeuxKPKU" width="560" height="315" title="Apple Event 14 September 2021 AR Easter Egg" frameborder="0" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
</p>

 

Сподіваюся, у вас все вийшло ;)