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

Большинство блоков с видео находятся в категории «Видео» библиотеки блоков Тильды.

Есть несколько методов вставки видео на страницу: вставка из сервисов YouTube, Vimeo, Kinescope, Rutube, VK Video или Boomtsream, добавление прямой ссылки на видео на стороннем сервере (HTML5 видео), вставка видео через iFrame.

Видео с YouTube можно вставить в блоках VD01 (Видео), VD04 (Кнопка «Play»), VD06 (Два YouTube плеера), VD08 (Текст и видео в две колонки), VD09 (Popup: Видео), VD11 (Видео с обложкой), VD12 (Видео слева и изображение справа), VD13 (YouTube-трансляция с комментариями), VD14 (Плейлист для видеокурса), VD16 (Виджет с видео), AB701 (Заголовок, описание и видео), BF402N (Изображение/ видео и форма в двух колонках), в некоторых блоках с галереей, а также блоках с полноэкранным фоном с изображением в качестве фона (подробнее про вставку видео фоном).

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

Выберите подходящий блок, перейдите в Контент блока и вставьте ссылку на видео.

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

Видео с Vimeo можно вставить в блоках VD01 (Видео), VD04 (Кнопка «Play»), VD06AN (Два Vimeo плеера), VD08 (Текст и видео в две колонки), VD09 (Popup: Видео), VD11 (Видео с обложкой), VD12 (Видео слева и изображение справа)VD14 (Плейлист для видеокурса), AB701 (Заголовок, описание и видео), BF402N (Изображение/ видео и форма в двух колонках), в некоторых блоках с галереей и блоках с изображением в качестве фона.

Если ваше видео закрыто настройками приватности в Vimeo, то у него появится дополнительная комбинация цифр и букв (hash-параметр ?h=) в конце ссылки после номера видео. Чтобы видео воспроизводилось, добавьте эту комбинацию в поле Vimeo Private Link Hash.

Видео можно загрузить на собственный сервер и вставить в блоки с HTML5 видео. Это блоки VD01 (Видео), VD04 (Кнопка «Play»), VD08 (Текст и видео в две колонки), VD09 (Popup: Видео), VD11 (Видео с обложкой), VD12 (Видео слева и изображение справа), VD16 (Виджет с видео), AB701 (Заголовок, описание и видео), BF402N (Изображение/ видео и форма в двух колонках), в некоторые блоки с галереей. Также HTML5 видео можно вставить в качестве фона в блоки с полноэкранным фоном (подробнее про вставку видео фоном).

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

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

После получения ссылки на файл зайдите в Контент блока с HTML5 видео и вставьте в нужные поля ссылку на ваш ролик в обоих форматах.

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

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

Видео с Rutube можно вставить в блоках VD01 (Видео), VD04 (Кнопка «Play»), VD08 (Текст и видео в две колонки), VD09 (Popup: Видео), VD11 (Видео с обложкой), VD12 (Видео слева и изображение справа), VD14 (Плейлист для видеокурса) и в некоторых блоках с изображением в качестве фона.

Зарегистрируйтесь в Rutube или войдите в свой аккаунт и перейдите в Rutube Studio. Чтобы загрузить свое видео на Rutube, нажмите на иконку плюса в правом верхнем углу экрана → Загрузить видео→ выберите файл и дождитесь, пока он загрузится на хостинг → укажите название, описание, параметры доступа (вы можете ограничить доступ к видео настройками приватности) и другие необходимые настройки → нажмите «Сохранить видео».

Нажмите на кнопку с тремя точками под видео → Поделиться роликом → скопируйте ссылку и укажите ее в Контенте блока с видео.

Если ваше видео закрыто настройками приватности в Rutube, скопируйте значение параметра ?p= в конце ссылки после номера видео, добавьте его в поле Vimeo Private Link Hash.

Видео с Kinescope можно вставить в блоках VD01 (Видео), VD04 (Кнопка «Play»), VD08 (Текст и видео в две колонки), VD09 (Popup: Видео), VD11 (Видео с обложкой), VD12 (Видео слева и изображение справа), VD14 (Плейлист для видеокурса), AB701 (Заголовок, описание и видео), BF402N (Изображение/ видео и форма в двух колонках) и в некоторых блоках с изображением в качестве фона.

Чтобы начать работу с Kinescope в необходимо зарегистрироваться на сайте https://kinescope.ru/ или войти в свой аккаунт.

Для загрузки своего видео в Kinescope нажмите кнопку «Новый» в правом верхнем углу, выберите «Загрузить файл» и добавьте видео.

Чтобы добавить видео на сайт, нажмите на кнопку с тремя точками возле видео в списке → Копировать ссылку → вставьте ссылку в Контент блока на Тильде.

Видео с VK Video можно вставить в блоках VD01 (Видео), VD04 (Кнопка «Play»), VD08 (Текст и видео в две колонки), VD09 (Popup: Видео), VD11 (Видео с обложкой), VD12 (Видео слева и изображение справа), VD14 (Плейлист для видеокурса), AB701 (Заголовок, описание и видео), BF402N (Изображение/ видео и форма в двух колонках), в некоторых блоках с изображением в качестве фона.

Чтобы получить ссылку на видео из VK Video, необходимо зарегистрироваться или авторизоваться в аккаунте VK.

Под нужным вам видео найдите кнопку с тремя точками (она появляется при наведении) → нажмите «Поделиться» → перейдите во вкладку «Экспортировать» → скопируйте ссылку в поле «Прямая ссылка» → укажите полученную ссылку в Контенте блока на Тильде.

Видео с Boomstream можно вставить в блоках VD01 (Видео), VD04 (Кнопка «Play»), VD08 (Текст и видео в две колонки), VD09 (Popup: Видео), VD11 (Видео с обложкой), VD12 (Видео слева и изображение справа), VD14 (Плейлист для видеокурса), AB701 (Заголовок, описание и видео), BF402N (Изображение/ видео и форма в двух колонках).

Зарегистрируйтесь на сайте Boomstream. После регистрации система предложит создать хотя бы один проект — нажмите «Создать» возле подходящего варианта.

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

После загрузки напротив нужного видео нажмите на иконку «Поделиться» → скопируйте ссылку → укажите ссылку в Контенте блока на Тильде.

Вставка видео через iframe доступна в блоках VD01 (Видео), VD04 (Кнопка «Play»), VD08 (Текст и видео в две колонки), VD09 (Popup: Видео), VD11 (Видео с обложкой), VD12 (Видео слева и изображение справа), VD14 (Плейлист для видеокурса), AB701 (Заголовок, описание и видео), BF402N (Изображение/ видео и форма в двух колонках).

Данный метод позволяет вставлять видео с любой платформы, которая предоставляет код iframe для вставки видео на сайт.

Настройки «Воспроизводить видео автоматически» и «Выключить звук у видео» не будут работать при использовании данного метода. Если платформа, на которой размещается видео, позволяет, то можно задать параметры Autoplay и Mute в ссылке.

Например, такая возможность есть в сервисе Яндекс.Дзен в разделе «Видео»: нажмите на кнопку с тремя точками под видео → Поделиться → Встроить → Код публикации → скопируйте ссылку и укажите в ней параметры mute=1 и autoplay=1. После загрузки опубликованной страницы видео будет воспроизводиться автоматически с выключенным звуком.

Вместо статичного фонового изображения обложки или других блоков с фоном-изображением можно поставить видеоролик. Зайдите во вкладку Контент и вставьте в нужное поле ссылку на ваш ролик. Вы можете использовать ссылку на видео из YouTube или ссылку на HTML5-видео, полученную по инструкции выше.

Блок с плейлистом находится в категории Видео → Блок VD14.

Этот блок поддерживает видеоролики с сервисов YouTube, Vimeo, Kinescope, Rutube, VK Video и Boomtsream. Для того, чтобы добавить видео, нужно для него прописать данные в формате
Ссылка на видео; Заголовок видео; Длина видео; Описание видео

Информация по каждому видео в плейлисте должна начинаться с новой строки.

Видеовиджет — это небольшое видео в углу экрана, которое может помочь в рассказе о вашем продукте или услуге. Превью работает без звука, а при клике подгружается основное видео со звуком.

Чтобы добавить виджет с видео, перейдите в категорию Видео и выберите блок VD16.

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

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

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

Опционально можно добавить превью-версию видео. Оно поможет пользователям получить предварительное представление о содержании основного видео и сократит время загрузки сайта. Оптимальный размер видео по ширине 200px и до 5 секунд.

Также вы можете указать ссылку и текст кнопки на основном видео, если вашей целью является побудить посетителя к какому-либо действию. Если кнопка не нужна, то просто оставьте поля пустыми.

В настройках блока можно настроить параметры виджета, открывающегося основного видео и кнопки. Для виджета можно указать соотношение сторон, ширину, параметры бордюра, расположение на экране и другие параметры. Для основного видео можно настроить параметры бордюра, тени и кнопки Play. Ширина видео всегда будет фиксированной — 560x315 для горизонтальных видео и наоборот - 315x560 для вертикальных.

Чтобы добавить видео в Zero Block → нажмите на кнопку плюс (+) и добавьте элемент «video» → выберите один из доступных способов вставки видео: YouTube, Vimeo, MP4, Rutube, Kinescope, VK Видео → вставьте ссылку на видео или его ID.

Для добавления видео из других сервисов, вы можете воспользоваться вставкой html-кода: добавьте элемент «html» → нажмите на кнопку «Edit Code» в панели настроек → укажите код для встраивания плеера. Ниже ↓ приведены примеры, как получить код.

В каталоге товаров есть возможность добавить видео, иллюстрирующее товар. Чтобы это сделать, перейдите в карточку товара → нажмите на ссылку «Видео» у любого изображения товара → в поле «Тип видео» выберите нужный сервис: YouTube, Vimeo, Rutube или VK Video → вставьте ссылку на видео или его ID.

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

Для того чтобы вставить основное видео, перейдите в карточку редактирования поста к полю с изображением → вкладка «Видео» и вставьте ссылку на видео.

Видео будет показываться в начале поста.

Чтобы добавить видео в текст поста, нажмите на иконку плюса слева → добавьте блок «Видео» → кликните на него и укажите ссылку на видео.

По клику на три точки слева от блока вы можете изменить видео.

Видео подтянется в тело поста. Сохраните изменения.

После этого видео будет показываться в тексте на странице с постом.

Видео можно вставить с помощью вставки кода плеера в блок c HTML-кодом. Для этого нужно перейти в настройки плеера или сервиса, чтобы получить код для вставки.

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

Для вставки видео из Kinescope нажмите на кнопку с тремя точками возле видео в списке → Встроить видео → выберите «Скопировать адаптивный код», если необходимо разместить плеер на всю ширину экрана, или «Скопировать фиксированный код», чтобы добавить небольшой плеер и задать его размер и расположение в скопированном коде → добавьте полученный код в блок T123 из категории Другое или внутри элемента HTML в Zero Block.

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

Для вставки видео из Яндекс.Дзен нажмите на кнопку с тремя точками под видео → Поделиться → Встроить → Код публикации → Скопируйте код вставки плеера и добавьте его в блок T123 из категории Другое или внутри элемента HTML в Zero Block.