[Урок 13] Делаем простой видеофон на сайте

Всем привет! Думаю вы неоднократно видели видеофоны на сайтах. Это выглядит эффектно и красиво, а главное - совсем не сложно.
Сегодня мы научимся добавлять простой видеофон на наш сайт. Погнали!)

Выбираем нужный блок

Идём к нашим любимым блокам и ищем раздел "Обложки". Выбираем любой понравившийся, но я возьму блок с наиболее большим количеством настроек - блок "СR41 - Обложка с заголовком и кнопкой Play".

Мы не будем редактировать заголовок, размеры и другие параметры блока - мы их уже разбирали в уроке : 👨‍💻 [Урок 5] Создаём сайт на стандартных блоках

Переходим сразу к нужным настройкам.

Переходим к настройкам контента

Пропускаем параметры заголовка и ищем пункт "ССЫЛКА НА YOUTUBE-РОЛИК ИЛИ ЕГО ID". Сюда вставляем ссылку на ролик, которая будет вылетать в popup'е, при нажатии на кнопку Play. Сейчас всё поймете наглядно.

Я ВОЗЬМУ ДАННОЕ ВИДЕО : https://youtu.be/GlrxcuEDyF8

Сохраняем. Смотрим.

Теперь при нажатии на кнопку "Play" вылетает всплывающее окно, в котором запускается ролик, который мы установили.

Приступим к видеофону

Открываем раздел - "ФОНОВОЕ ВИДЕО", нам доступны 3 варианта загрузки видео.
Самый простой - залить видео из YouTube.

Аналогично вставляем ID ролика или его ссылку в первое поле.

Нажимаем сохранить и закрыть - смотрим результат.

Видео играет, фон работает, глаза радуются.

Чтобы залить видео в формате .webm и .MP4 нам придётся воспользоваться конвертером видео.
Выгрузить его на хостинг тильды мы не можем, но можем залить на любой другой. Либо же просто воспользоваться хостингом файлообменника Dropbox.

Почему нужно заливать видео в нескольких форматах?

Дело в том, что разные браузеры поддерживают разные форматы и универсального не существует. Поэтому, когда пользователь будет заходить на сайт, ему будет показываться видео в подходящем для его браузера формате. Иначе обложка будет пустой.

Ещё несколько настроек видеофона

Летим в основные настройки блока, там ищем раздел ФОНОВОЕ ВИДЕО.

Пройдёмся по параметрам:

Не выключать звук у видео - поставив галочку включится оригинальный звук видео (не советую этого делать)

Не зацикливать видео - если поставим галочку, видео не будет повторяться, а просто открутится и закончится

Не применять улучшенное масштабирование YouTube видео - скажу честно, это самый туманный параметр для меня. Обычно я не ставлю галочку здесь. Данный параметр включает какую-то функцию самого ютуба.

Редактируем кнопку Play

Раз уж мы выбрали данный блок, давайте за одно отредактируем кнопку. Переходим к настройкам блока и ищем вкладку POPUP И КНОПКА PLAY.

Цвет кнопки и фона кнопки - параметры всем понятные. Мне не совсем нравится жёлтая кнопка, поэтому я сделаю её черно-белой.

КНОПКА PLAY: РАЗМЕР - размеры кнопки. По умолчанию стоит 100px, я поставлю 200. Мы изменяем диаметр кнопки, в пикселях само собой.

Настройки Popup

Это настройки того самого всплывающего окна, в котором воспроизводится видео.

Размер (ширина) - по умолчанию стоит в 6 колонок. Можно поставить и 100% ширину и 12 колонок. Я установлю 8 колонок.

Цвет фона - можем назначить абсолютно любой цвет заливки контейнера. Если удалить все показатели - фон станет прозрачным. Я же сделаю его чёрным.

Непрозрачность - прозрачность фона. Поставим его на 50%

Вот и всё. Мы сделали простой блок с видеофоном. Импровизируйте, фантазируйте, а главное пробуйте! Тестируйте другие блоки обложки, меняйте текста, видео и другие настройки. Всё получится!