Как добавить видео в тильду не из ютуба

Видео на фон в Zero блоке

Вместо .tn-elem__2946290291616420206251 укажите класс своего HTML-элемента. Задать произвольный класс элементу в Zero блоке можно с помощью контекстного меню (вызывается правой кнопкой мыши по элементу) и нажать «Add CSS Class Name».

Фоновое видео пропорционально ширине и высоте экрана устройства

Предупреждение. На смартфоне видео будет прыгать при скрытии адресной строки и панели снизу (где кнопки). Лучше использовать 1-й вариант кода.

   
  .videoBackground > video

Фоновое видео на всю страницу в Тильде

   
  .videoBackground > video

Как добавить видео?

Чтобы добавить на страницу видео, используйте блоки из категории «Видео». Это может быть просто плеер, два плеера в ряд, сочетание видео и текста и попап с видео. Видеоролик должен быть предварительно загружен на YouTube или Vimeo.

Также вы можете загрузить видео в блоки из категории «Галерея».

Чтобы добавить фоновое видео на обложку, в меню «Контент» блока с обложкой поставьте ссылку на Youtube ролик: https://help-ru.tilda.cc/cover

Подробнее про другие варианты по вставке видео читайте в материале https://help-ru.tilda.cc/video

Как добавить видео в Tilda

Вставить видео на страницу сайта на Тильде не составит особого труда. Для этого есть специальные готовые решения в стандартных блоках Тильды, а также в Zero-block.

Предварительно видео нужно загрузить в Youtube или Vimeo. Просто загрузить файл видео не получится. По крайней мере на момент выхода статьи.

В какие блоки и как вставить видео поговорим в этой статье.

Как добавить видео в стандартные блоки

Начнем, пожалуй, с самого раздела Видео

Раздел Видео

блок VD01

В этот блок вы сможете вставить видео из Youtube. Обложка подтягивается автоматически.

блок VD03

В этот блок вы сможете вставить видео из Vimeo. Обложка подтягивается автоматически.

блок VD04

Простая кнопка для воспроизведения видео. По нажатию на кнопку открывается видео-плеер Youtube.

блок VD05

В это блок вы сможете добавить видео, загруженной на ваш хостинг или взятое с другого сайта (в этом случае вы полагаетесь на другой сервис). Формат видео может быть .MP4, .WEBM. Вам нужно будет в «Контенте» блока поставить ссылку на это видео. Также, не забудьте загрузить обложку для видео.

блок VD06

В этот блок можно вставить два видео, загруженных в Youtube. Обложки подтягиваются автоматически. Можно добавить текст под каждым роликом.

блок VD06A

В этот блок можно вставить два видео, загруженных в Vimeo. Обложки подтягиваются автоматически. Можно добавить текст под каждым роликом.

блок VD07

В блок можно поставить ссылку на COUB — видео

блок VD08

Блок представляет из себя Текст и видео из Youtube. Ширину колонок можно менять. Сюда же можно добавлять кнопку под текст.

блок VD09

Всплывающий Pop-up блок с Youtube видео

блок VD10

Всплывающий Pop-up блок с видео из Vimeo

блок VD11

Блок с Youtube-видео. Сюда можно загрузить собственную обложку. Кроме этого, можно добавить Подзаголовок, Заголовок, Описание и Текст на обложку видео

Читать:

Как избежать deadlock

блок VD12

Блок разделенный на две части: слева — видео из Youtube, справа — картинка. Обложка видео подтягиваются автоматически. Ширину колонок можно менять. Под картинкой можно добавить текст.

блок VD13

Блок c Youtube трансляцией. Сюда можно добавить живой чат, вставив html-код в соответсвующее поле.

блок VD14

Блок видео-плейлист. В «Контенте» блока можно вставить видео и с Youtube, и с Vimeo. Вставлять видео нужно в формате «ссылка; заголовок видео; длительность видео; описание».

Другие стандартные блоки

Кроме вышеперечисленных блоков, видео можно добавлять:

в обложки: CR01, CR02, CR06, CR07, CR08, CR10, CR11 , CR12 , CR15 , CR16, CR17 , CR18 , CR19 , CR19A , CR21 , CR22 , CR22A , CR27 , CR28 , CR36 , CR37 , CR38 , CR40 , CR41;
в галереи: GL01, GL06;
в текстовый блок: TX14;
в форму: BF402N;
о проекте: AB701;

Как добавить Видео в Zero-block

Создайте Zero-block и зайдите в его редактирование.
В левом верхнем углу нажмите на «плюсик» и выберите Add VIdeo

Нажмите на блок видео, чтоб в правом меню настроек отобразились настройки блока с видео. Выберите ресурс, с которого будет добавлено видео и вставьте ссылку на него:

Опционально можно выставить автовоспроизведение, отключить звук, зациклить воспроизведение, и поставить место, с которого воспроизведение начнется и/или закончится.

Рекомендую самостоятельно загрузить обложку к этому видео. Сделать это можно в этих же настройках блока.

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

Надеюсь, статья была полезная для вас.

Если остались какие-то вопросы, пишите из в комментариях. Без ответа не оставим никого

Как добавить video в ZeroBlock и запускать его при наведении в Tilda

В этот элемент вставили первый код
В этом коде указали ссылку на наш mp4 файл (не youtube, не vimeo)
https://310401.selcdn.ru/MIXED/Mahmut-Orhan-Without_You.mp4
(как добавлять видео)
И ссылку на обложку
https://static.tildacdn.com/tild6565-6530-4131-a265-376661643334/buray-mecnun-mahmut-.jpg
И ссылку на кнопку https://yandex.ru

Добавили второй код в блок Другое — Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Добавляем видео в Zero. Запускаем его при наведении. Загружаем mp4 файл на dropbox

Фрагмент видео

Библиотека для примера

  .videowrapper < position: relative; overflow: hidden; >.videowrapper, .tn-atom.tn-atom__html < width: inherit; height: inherit; >.bg_image < position: absolute; top: 0; left: 0; background-size: cover; background-position: center; width: 100%; height: 100%; pointer-events: none; transition: all 0.2s; >.video-btn < position: absolute; background-color: rgb(0 0 0 / 70%); width: 100%; height: 40px; display: flex; align-items: center; box-sizing: border-box; bottom: 0; left: 0; transition: all 0.2s; transform: translateY(100%); backdrop-filter: invert(1); >.video-btn a, .video-btn div < width: inherit; height: inherit; >.video-btn div < display: flex; align-items: center; padding-left: 20px; >.video-btn div < transition: all 0.2s 0.2s; transform: translateY(100%); >.videowrapper:hover .video-btn div < transform: translateY(0); >.video-btn a < font-family: 'Open Sans',Arial,sans-serif; font-weight: 300; color: #fff !important; font-size: 16px; >.videowrapper:hover .video-btn < transform: translateY(0); >.videowrapper:hover .bg_image video

Доступ на 1 месяц
ко всем видео ( список )

400 р. / мес

Поддержка
Советы
Подсказки

Подписаться на 1 месяц

Доступ на 1 год
ко всем видео ( список )

1800 р. / год

Поддержка
Советы
Подсказки
Скидка на курсы 10%

Подписаться на 1 год

Бесконечный доступ
ко всем видео ( список )

Поддержка
Советы
Подсказки
Скидка на курсы 20%

Подписаться без ограничений

Content Oriented Web

Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.