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

HTML, CSS, JavaScript, PHP
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>

 

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

Теги: