Вставка адаптивного YouTube-видео Tilda

Рано или поздно любой начинающий верстальщик или дизайнер в конструкторе сайтов сталкивается с проблемой вставки видео с youtube. Проблема связана с некорректным отображением на разных устройствах.
В этой статье я расскажу, как правильно вставлять YouTube-ролики и помогу настроить параметры самого видео.

Шаг первый. Копируем код видео

пример

<iframe 
	width="1280" 
	height="720" 
	src="https://www.youtube.com/embed/LXb3EKWsInQ" 
	title="YouTube video player" 
	frameborder="0" 
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
	allowfullscreen>
</iframe>

Этот код представляет из себя "включаемую область", которая не умеет адаптироваться под своё внутреннее содержимое. Браузеры при отображении этой области в первую очередь смотрят на её параметры ширины и высоты, которые заданы в соответствующих атрибутах width и height.
Эти значения вскоре нам понадобятся.

Шаг второй. Адаптируем видео

Чтобы заставить браузер отображать видео при любых размерах и с соблюдением пропорций, нам потребуется:

Создать блок с фиксированной пропорцией ширины и высоты.
Пропорция задаётся с помощью css свойства padding-top, где в значении указывается процентное соотношение высоты видео к его ширине. Посчитать не сложно, нужно всего лишь высоту видео разделить на его ширину и результат перевести в проценты.

Для видео из примера получится:
720 / 1280 = 0.5625 = 56.25%

Растянуть включаемую область по всему размеру фиксированного блока
Делается это также с помощью css свойств

в итоге должен получится следующий код

<div style="position: relative; padding-top: 56.25%">
	<iframe 
		width="1280" 
		height="720" 
		style="max-width: 100%;max-height: 100%;position: absolute;top: 0;"
		src="https://www.youtube.com/embed/LXb3EKWsInQ" 
		title="YouTube video player" 
		frameborder="0" 
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
		allowfullscreen>
	</iframe>
</div>

Шаг третий. Тонкая настройка

Технически YouTube позволяет настроить отображение подключаемого видео с помощью параметров в ссылке. Но такой способ настройки доступен только профессионалам.
Мы же исправим эту ситуацию!

Исходный код

Расширенные настройки видео