Как сделать видео YouTube на сайте адаптивным?

Как сделать видео YouTube на сайте адаптивным?

Нужно сделать видео адаптивным на телефоне, планшете, ноутбуке и ПК? Без проблем! Для этого вам понадобиться лишь создать 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/8lQ_MH44DVs" width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
</p>

 

Надеюсь, у вас всё получилось ;)