Вставка видео на страницу

Как добавить видео с видеохостинга YouTube
Как добавить видео с видеохостинга Vimeo
Как добавить видео, находящееся на стороннем сервере
Добавление видео фоном в обложки и другие блоки
Как добавить плейлист с несколькими видео
Как добавить видеовиджет, который фиксируется в углу страницы
Как вставить видео для описания товаров
Как вставить видео в пост в Потоках
Как вставить видео, находящееся на других видеохостингах
Вставка видео на страницу
Большинство блоков с видео находятся в категории «Видео» библиотеки блоков Тильды.
Есть 3 основных метода вставки видео: вставка YouTube, Vimeo и возможность добавить прямую ссылку на видео на стороннем сервере (HTML5 видео). Выберите подходящий вам блок, перейдите в Контент блока и вставьте ссылку на него.
Особенности вставки видео с YouTube
Видео с YouTube можно вставить в блоках VD01 (одно видео), VD04 (показ после нажатия на кнопку Play), VD06 (два видео), VD08 (видео и текст), VD09 (попап с видео), VD11 (видео со своей обложкой), VD12 (в комбинации с изображением в ряд), VD14 (плейлист), некоторых блоках с галереей, а также блоках с полноэкранным фоном с изображением в качестве фона (подробнее про вставку видео фоном).

Для вставки видео достаточно ссылки и чтобы видео было публичным и не имело запрета для вставки на сторонних сайтах в настройках приватности.

Чтобы видео воспроизводилось с определенного момента, вставьте фрагмент ?start= и после него укажите нужное время в секундах от начала ролика. Например, XEfDYMngJeE?start=5025. В таком случае видео начнет воспроизводиться с 5025 секунды. Быстро скопировать время можно, щелкнув правой кнопкой по плееру и выбрав пункт «Скопировать URL видео с привязкой ко времени».
Особенности вставки видео с Vimeo
Видео с Vimeo можно вставить в блоках VD03 (одно видео), VD06A (два видео), VD08 (видео и текст), VD10 (попап с видео), VD11 (видео со своей обложкой) и VD14 (плейлист) и некоторых блоках с галереей. В качестве фона видео с Vimeo вставить не получится.

Если ваше видео закрыто настройками приватности в Vimeo, то у него появится дополнительная комбинация цифр и букв в конце ссылки после номера видео. Чтобы видео воспроизводилось, добавьте эту комбинацию в поле Vimeo Private Link Hash.
Особенности вставки видео с стороннего сервера (HTML5-видео)
Если ваше видео не находится на данных видеохостингах, то его можно загрузить на собственный сервер и вставить в блоки с HTML5 видео. Это блоки VD05 (одно видео), VD08 (видео и текст), VD11 (видео со своей обложкой) и VD15 (HTML5 видео в попапе) и некоторые блоки с галереей. Также HTML5 видео можно вставить в качестве фона в блоки с полноэкранным фоном (подробнее про вставку видео фоном).

Чтобы добавить такое видео на страницу, нужно получить файл видео в формате webm и mp4. Сконвертировать видео в эти форматы можно с помощью онлайн-конвертеров или в программах редактирования или конвертации видео. Далее нужно разместить его на хостинге и получить прямую ссылку на файл. Обратите внимание, что не все файловые хранилища имеют такую возможность и с большой вероятностью нужно будет использовать платный файловый хостинг, например, Selectel.
Загрузить свой видеофайл на Тильду не получится, но можно использовать сторонние сервисы, которые отдают прямую ссылку на файл.

Лучшим вариантом будет загрузить файл на свой хостинг, например, на Selectel c помощью инструкции http://help-ru.tilda.cc/file-uploading#selectel.
Зайдите в Контент блока с HTML5 видео и вставьте в нужные поля ссылку на ваш ролик в обоих форматах.
В некоторых блоках есть только одно поле для вставки ссылки с HTML5-видео. В таком случае можно использовать только один формат и предпочтительней использовать mp4.

Таблица поддержки браузерами mp4-видео →
Таблица поддержки браузерами webm-видео →
Фоновое видео в обложках и других блоках
Вместо статичного фонового изображения обложки или других блоков с фоном-изображением можно поставить видеоролик. Зайдите во вкладку Контент и вставьте в нужное поле ссылку на ваш ролик. Вы можете использовать ссылку на видео из YouTube или ссылку на HTML5-видео, полученную по инструкции выше.
Пример обложки с фоновым видео
Блок с плейлистом из видео
Блок с плейлистом находится в категории Видео → Блок VD14.
Этот блок поддерживает видеоролики с сервисов YouTube и Vimeo. Для того, чтобы добавить видео, нужно для него прописать данные в формате
Ссылка на видео; Заголовок видео; Длина видео; Описание видео

Информация по каждому видео в плейлисте должна начинаться с новой строки.
Виджет с видео
Видеовиджет — это небольшое видео в углу экрана, которое может помочь в рассказе о вашем продукте или услуге. Превью работает без звука, а при клике подгружается основное видео со звуком.
Чтобы добавить виджет с видео, перейдите в категорию Видео и выберите блок VD16.
Перед добавлением нужно подготовить и оптимизировать ваше видео для веба (с помощью специальных программ или онлайн-редакторов, например, Veed.io).

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

Лучшим вариантом будет загрузить файл на свой хостинг, например, на Selectel. Подробная инструкция →
Перейдите в Контент блока и вставьте ссылку на основное видео.

Опционально можно добавить превью-версию видео. Оно поможет пользователям получить предварительное представление о содержании основного видео и сократит время загрузки сайта. Оптимальный размер видео по ширине 200px и до 5 секунд.
Также вы можете указать ссылку и текст кнопки на основном видео, если вашей целью является побудить посетителя к какому-либо действию. Если кнопка не нужна, то просто оставьте поля пустыми.
В настройках блока можно настроить параметры виджета, открывающегося основного видео и кнопки. Для виджета можно указать соотношение сторон, ширину, параметры бордюра, расположение на экране и другие параметры. Для основного видео можно настроить параметры бордюра, тени и кнопки Play. Ширина видео всегда будет фиксированной — 560x315 для горизонтальных видео и наоборот - 315x560 для вертикальных.
Видео для товара в каталоге
В каталоге товаров есть возможность добавить видео, иллюстрирующее товар. Чтобы это сделать, перейдите в карточку товара → ссылка «Видео» у любого изображения товара и вставьте ссылку на видео на YouTube или Vimeo.
Вставка видео в пост в Потоках
В Потоках можно вставить как основное видео для поста (которое будет показываться в начале поста и будет обложкой в списке постов), так и вставить несколько видео в текст поста в Потоках.

Для того чтобы вставить основное видео, перейдите в карточку редактирования поста к полю с изображением → вкладка «Видео» и вставьте ссылку на видео.
Видео будет показываться в начале поста.
Чтобы добавить видео в текст поста, поставьте курсор в нужном месте и в верхней панели форматирования нажмите на иконку с видео и вставьте ссылку на него.
Видео подтянется в тело поста. Сохраните изменения.
После этого видео будет показываться в тексте на странице с постом.
Видео с других сервисов: Rutube, Kinescope
Видео со сторонних сервисов (Rutube, Kinescope) можно вставить с помощью вставки кода плеера в блок c HTML-кодом. Для этого нужно перейти в настройки плеера или сервиса, чтобы получить код для вставки.

Для Rutube нажмите на кнопку «Поделиться» под видео → Код вставки плеера и плейлиста → Скопируйте код вставки плеера и добавьте его в блок T123 из категории Другое или внутри элемента HTML в Zero Block.
Для Kinescope нажмите на кнопку с тремя точками возле видео в списке → Копировать ссылку → Скопировать код для встраивания и вставьте его в блок с HTML T123 из категории Другое или внутри элемента HTML в Zero Block.
Made on
Tilda