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

🗓️ Обновлено: 19.08.2021
💬Комментариев: 12
👁️Просмотров: 8039
web

Вставить видео на страницу сайта на Тильде не составит особого труда. Для этого есть специальные готовые решения в стандартных блоках Тильды, а также в 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-видео. Сюда можно загрузить собственную обложку. Кроме этого, можно добавить Подзаголовок, Заголовок, Описание и Текст на обложку видео

  • блок 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

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

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

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

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

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

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

Статья была полезной?
👍
Да - 19
👎
Нет - 23
💬Комментарии:
Александра

Добрый день, подскажите пожалуйста, а в стандартные блоки можно поставить видео со звуком ?

Кирилл

добрый день. они все вставляются со звуком

Юлия

Здравствуйте, как можно загрузить свое видео MP4 в Зеро блок?

Кирилл

К сожалению, никак. Можно залить только на Youtube или Vimeo

Кирилл

Вставляем видеофон в ZeroBlock с автовоспроизведением и отключенным звуком.
1. Добавить ZeroBlock (высота Window Container Height — 100%)
2. Добавить блок CR01 (добавить в него видеофон, высота 100vh)
3. Добавить скрипт и прописать свои ID

Замените:
#recXXXXXXXXX — это ID блока CR01
#recYYYYYYYYY — это ID ZeroBlock

Скрипт добавляется в блок ДРУГОЕ►Т123. Не забудьте заключить скрипт в теги — в угловых скобках напишите script и /script перед скриптом и после него соответственно

$(‘#recXXXXXXX’).appendTo(‘#recYYYYYYY .t396__carrier’);

Антон

Как сделать фоновое видео с фиксацией?

Павел

Не стоит так делать. Фоновое видео усложняет восприятие контента и отвлекает от продукта. Если сайт необходим, для результата, а не для красоты, то не нужно этого делать.

Ксения

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

Sol

Здравствуйте!
Как под загруженное видео с ютуба на вышеуказанные блоки добавить кнопки со скоростями воспроизведения?

Кирилл

кнопки скоростей воспроизведения есть в стандартной панели управления проигрывателем youtube.

Оксана

Здравствуйте) Вставляю в зеро блок видео из ютюба и включаю автоплей, сохраняю, но на предпросмотре видео не воспроизводится автоматически, только если нажать на плей на видео. В чем может быть проблема ?

Кири

Привет) попробуйте выставить параметр mute. К url видео добавьте значение mute=1

Добавить комментарий для Ксения Отменить ответ

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 27369
Появление элементов при скролле
Просмотров: 23793
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 14739
Как выровнять картинку по центру с помощью CSS
Просмотров: 12969
Перенос сайта на Тильде на свой хостинг. Пошаговое руководство
Просмотров: 10751
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Viva Magenta
🤔Цвет 2023 года
Исследовательский институт Pantone выбрал главный цвет 2023 года. Им стал карминово-красный оттенок с фиолетовым подтоном, который назвали Viva Magenta.
#bb2649