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

Сегодня я напишу так быстро, потому что уже поздно, и я устал и хочу спать. Поэтому учебник не будет слишком сложным, но может оказаться полезным. Если вы хотите поставить YouTube видео на нашем сайте, под видео на YT нажмите кнопку «Поделиться», затем «поместите на страницу» и скопируйте код из окна.

Мы помещаем этот код в HTML-код на странице

<iframe width="560" height="315" src="https://www.youtube.com/embed/qP4Y9rp4IOs?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Я покажу вам трюк, чтобы сделать видео адаптивным. Убираем ширину и высоту из кода и в конце кода добавляем class=”video”.

<iframe src="https://www.youtube.com/embed/qP4Y9rp4IOs?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen class="video"></iframe>

Это класс, который мы определим в стилях css

.video{
	width: 47%;
	height: 290px;
	margin-left: 0.3%;
	margin-right: 0.3%;
}

В ширину мы вводим ширину окна в %, это может быть 100%, если нужно растянуть видео на всю ширину страницы, вы также должны ввести высоту. Мы должны сами подобрать, какая высота подойдет лучше всего.

Чтобы окно видео хорошо смотрелось в других разрешениях, добавьте стили @media, например, стиль для смартфонов:

@media (max-width: 550px) {
.video{
	width: 100%;
	height: 220px;
	margin-left: 0.3%;
	margin-right: 0.3%;
}
}

В приведенном выше примере я использовал 100% ширину, чтобы видео было легче видеть по всей ширине экрана. Я также отрегулировал высоту.

Готово, у нас есть видео, которое адаптируется к окну браузера, и нам не нужно беспокоиться насколько оно выйдет за пределы страницы.