Как сделать видео в Тильде в зероблоке?
Этот скрипт позволит тебе сделать любое видео бесплатно, c автоплеем на пк или мобильных, без нагрузки на страницу, в Zeroblock и со своим дизайном. Пример работы модификации внизу cтраницы
1 мин.
Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓
Видео-инструкция
!
Видео-инструкция
JavaScript
Zeroblock
1. Создай на странице зероблок, в который будем добавлять видео и добавь в него видео через add Video
2. Если тебе не нужна своя кнопка плей, то не вбивай никаких значений в генератор и сразу нажми "скопировать код" и вставь его в блок т123 на твою страничку
2. Если тебе не нужна своя кнопка плей, то не вбивай никаких значений в генератор и сразу нажми "скопировать код" и вставь его в блок т123 на твою страничку
Инструкция
Важно!
- Если тебе не нужен автоплей, то обязательно загружай превью для твоего видео, потому что так оно будет загружаться только после клика по кнопке "плей", а не с самого начала загрузки страницы
- Не добавляй таким образом большие видео с автоплеем, ибо это может нагрузить страницу! Оптимальный размер видео - не более ~10мб. Вот ссылка на компрессор видео если что
- Учти, что ни одно видео не может автоплеиться на Iphone, если на нём вк лючен режим "энергосбережения". Это исключение и ни один код не может на это повлиять, ибо так сделали в Apple специально
- Не добавляй таким образом большие видео с автоплеем, ибо это может нагрузить страницу! Оптимальный размер видео - не более ~10мб. Вот ссылка на компрессор видео если что
- Учти, что ни одно видео не может автоплеиться на Iphone, если на нём вк лючен режим "энергосбережения". Это исключение и ни один код не может на это повлиять, ибо так сделали в Apple специально
(Развернуть)
undefined
2.1 Если тебе нужна своя кнопка плей, то загрузи сначала её в зероблок и убери за границы видимости, а затем скопируй ссылку на эту картину
2.2 Обязательно загрузи превью к видео в зеро чтобы кнопка могла быть изменена
2.3 Вставь полученную ссылку на картинку для твоей кнопки плей (если нужно то также можно загрузить и дизайн кнопки по наведению) в генератор с кодом и скопируй код и вставь в блок т123 на твою страничку
2.2 Обязательно загрузи превью к видео в зеро чтобы кнопка могла быть изменена
2.3 Вставь полученную ссылку на картинку для твоей кнопки плей (если нужно то также можно загрузить и дизайн кнопки по наведению) в генератор с кодом и скопируй код и вставь в блок т123 на твою страничку
undefined
undefined
4. После регистрации нажимаем на new
undefined
5. Далее пишем любое название в repository name, выбираем public (если не выбрано) и жмём create repository
undefined
3. Чтобы загрузить в зеро видео, его нужно залить на какой-то сервер. Т.к. youtube\vimeo не позволяют скрывать свои элементы управления (например подпись "посмотреть на youtube" и тд.), то зальём видео на собственный сервер, чтобы оно загружалось с него напрямую. Для этого нужно сначала зарегистрироваться на
6. Затем кликаем на upload an existing file
undefined
7. Перетаскиваем все наши видео в соответствующую зону и ТОЛЬКО после загрузки всех файлов жмём commit changes
undefined
8. Затем жмём на название нашего видео в открывшемся списке
undefined
9. После этого нажимаем правой кнопкой мыши по кнопке view raw и копируем полученную ссылку
undefined
10. В этой ссылке обязательно меняем следующее:
https://github.com/
заменить на
Скопировать
https://rawcdn.githack.com/
/raw
из нашей ссылки, а затем
11. После этого нашу ссылку можно добавлять в наш элемент video внутри зероблока.
выбери в списке слева название
11.1 Если тебе нужно загрузить ещё видео, то просто вернись на
undefined
которое указывал в пункте 5. и дальше нажми Add file и upload files и повтори всё с пункта 6 ещё раз для каждого нужного тебе видео
undefined
Сначала нужно обязательно удалить
undefined
Скопировать код
Отчистить поля
123
Это видео будет автовоспроизводиться даже на мобильных и его можно настроить прямо в зероблоке
Пример работы модификации 1
Для этого видео я задал необязательные настройки изменения кнопки плей на свою (они применятся ко всем видео сразу) + скругление углов
Пример работы модификации 2
Нажимая "Отправить", вы даете согласие на обработку персональных данных в соответствии с Политикой конфиденциальности
Опиши нужный функционал через эту форму и он будет добавлен!
Не хватает какой-то функции?
