URL скопирован в буфер обмена!
Как добавить свое видео на фон в Zero Block на Tilda?
С помощью этой модификации можно добавить свое видео формата MP4 в качестве фона Zero Block. Дополнительно можно вывести свои кнопки управления звуком. Работает на мобилках!
Модификация обновлена. Добавлена возможность выбрать качество видео (работает только для видео которые загрузили в kinescope).
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Ссылка на видео
Качество(см. инструкцию)
Зацикливание
Кнопка"включить/отключить звук"
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD003-->
<video id="ticodevideo" width="100%" height="100%" style="-o-object-fit: cover; object-fit: cover; position: absolute;" autoplay playsinline muted loop>
<source src="/720p" type="video/mp4">
</video>
1. Создаем Zero Block html контейнер
2. Контейнеру ставим свойство window container(высота 100%, ширина 100%)
3. Загружаем видео в Kinescope, так как Тильда не разрешает хранить видео у себя. Если нет аккаунта Kinescope, то создаем по ссылке. Получаем прямую ссылку на видео. Для этого в кинескопе нажимаем на три точки и выбираем "копировать ссылку". Вставляем ссылку в генератор в поле "Ссылка на видео"
4. При необходимости указываем дополнительные настройки в генераторе:
Зацикливание - если выключить, то видео остановиться в конце и не будет перезапуска;
Качество видео - эта настройка работает только если грузили видео на Кинескоп. Если грузили на другой хостинг, выберите опцию "другое". Кинескоп сжимает видео в три формата: 1080, 720 и 480. Если выставили формат 1080, но видео не воспроизводится, это означает, что исходное видео было низкого качества, и Кинескоп не смог создать формат 1080. В таком случае выберите 720 или 480.
5. Копируем готовый код и вставляем в html контейнер в Zero Block.
Если в генераторе кода вы указали "добавить кнопку включения/отключения громкости", то дополнительно в зеро блоке создаем две кнопки. Первой назначаем класс tc-unmute второй tc-mute Вместо кнопок можно использовать(шейп, картинку или текст).
Если вам нужно больше опций для управления видео, скруглить углы, настроить проигрывание при наведении, то лучше воспользоваться нашим конструктором видео для Тильда.
2. Контейнеру ставим свойство window container(высота 100%, ширина 100%)
3. Загружаем видео в Kinescope, так как Тильда не разрешает хранить видео у себя. Если нет аккаунта Kinescope, то создаем по ссылке. Получаем прямую ссылку на видео. Для этого в кинескопе нажимаем на три точки и выбираем "копировать ссылку". Вставляем ссылку в генератор в поле "Ссылка на видео"
4. При необходимости указываем дополнительные настройки в генераторе:
Зацикливание - если выключить, то видео остановиться в конце и не будет перезапуска;
Качество видео - эта настройка работает только если грузили видео на Кинескоп. Если грузили на другой хостинг, выберите опцию "другое". Кинескоп сжимает видео в три формата: 1080, 720 и 480. Если выставили формат 1080, но видео не воспроизводится, это означает, что исходное видео было низкого качества, и Кинескоп не смог создать формат 1080. В таком случае выберите 720 или 480.
5. Копируем готовый код и вставляем в html контейнер в Zero Block.
Если в генераторе кода вы указали "добавить кнопку включения/отключения громкости", то дополнительно в зеро блоке создаем две кнопки. Первой назначаем класс tc-unmute второй tc-mute Вместо кнопок можно использовать(шейп, картинку или текст).
Если вам нужно больше опций для управления видео, скруглить углы, настроить проигрывание при наведении, то лучше воспользоваться нашим конструктором видео для Тильда.
Background
- video
