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