Оставить заявку
О ПРОЕКТЕ
Нажимая кнопку "Отправить", вы даете согласие на обработку персональных данных
Вставка адаптивного 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 позволяет настроить отображение подключаемого видео с помощью параметров в ссылке. Но такой способ настройки доступен только профессионалам.
Мы же исправим эту ситуацию!
Исходный код




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

Autoplay (Определяет, начинается ли воспроизведение исходного видео сразу после загрузки проигрывателя)




Controls (Будут ли отображаться элементы управления проигрывателем)




Rel (Будут ли воспроизводиться похожие видео после завершения показа исходного видео)




Showinfo (Выводит информацию о видео, такую как название и автор видео)




Loop (Воспроизводит видео по кругу, в бесконечном цикле)




modestbranding (Небольшая текстовая метка YouTube будет отображаться в правом верхнем углу при наведении курсора на проигрыватель во время паузы)




fs (Будет ли отображаться кнопка полноэкранного режима)




mute (Отключить звук)




Результат


Антон из Dojo
Программист который может и пластинку продать
Did you like this article?