К основному контенту

1 мин

Zeroblock

Light

5

Этот скрипт позволит тебе сделать любое количество многофункциональных и независимых друг от друга слайдеров как из Zeroblock, так и из стандартных блоков на одной странице. Модификация совместима с Autoscale.

Как сделать видео в Тильде в зероблоке?

(cвернуть)
Инструкция

1. Создай на странице зероблок, в который будем добавлять видео и добавь в него видео через add Video

2. Если тебе не нужна своя кнопка плей, то не вбивай никаких значений в генератор и сразу нажми "скопировать код" и вставь его в блок т123 на твою страничку

3. Чтобы загрузить в зеро видео, его нужно залить на какой-то сервер. Т.к. youtube\vimeo не позволяют скрывать свои элементы управления (например подпись "посмотреть на youtube" и тд.), то зальём видео на собственный сервер, чтобы оно загружалось с него напрямую. Для этого нужно сначала зарегистрироваться на github.com

  • Если тебе нужна своя кнопка плей, то загрузи сначала её в зероблок и убери за границы видимости, а затем скопируй ссылку на эту картину

  • Обязательно загрузи превью к видео в зеро чтобы кнопка могла быть изменена

  • 11.1 Если тебе нужно загрузить ещё видео, то просто вернись на github.com выбери в списке слева название которое указывал в пункте 5. и дальше нажми Add file и upload files и повтори всё с пункта 6 ещё раз для каждого нужного тебе видео

  • Вставь полученную ссылку на картинку для твоей кнопки плей (если нужно то также можно загрузить и дизайн кнопки по наведению) в генератор с кодом и скопируй код и вставь в блок т123 на твою страничку

4. После регистрации нажимаем на new

5. Далее пишем любое название в repository name, выбираем public (если не выбрано) и жмём create repository

6. Затем кликаем на upload an existing file

7. Перетаскиваем все наши видео в соответствующую зону и ТОЛЬКО после загрузки всех файлов жмём commit changes

8. Затем жмём на название нашего видео в открывшемся списке

https://rawcdn.githack.com/
https://github.com/
/raw

9. После этого нажимаем правой кнопкой мыши по кнопке view raw и копируем полученную ссылку

10. В этой ссылке обязательно меняем следующее:

заменить на

из нашей ссылки, и

Сначала нужно обязательно удалить

11. После этого нашу ссылку можно добавлять в наш элемент video внутри зероблока.

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

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

- Не добавляй таким образом большие видео с автоплеем, ибо это может нагрузить страницу! Оптимальный размер видео - не более ~10мб. Вот ссылка на компрессор видео если что https://www.freeconvert.com/video-compressor

- Учти, что ни одно видео не может автоплеиться на Iphone, если на нём вк лючен режим "энергосбережения". Это исключение и ни один код не может на это повлиять, ибо так сделали в Apple специально

Важно!

undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Скопировать код
<!--Библиотека VORON--><!--Видео с автоплеем в зеро https://voron-dev.ru/video-->
      <script>
t_onReady(function () {
  t_onFuncLoad('t396_init', function () {
  document.querySelectorAll('[data-elem-type="video"] video').forEach(function (element) {
    if (element.autoplay) {
      element.removeAttribute('autoplay', 'false');
      element.setAttribute('muted', 'true'); 
      element.setAttribute('autoplay', 'true'); 
      element.setAttribute('playsinline', 'true');
    }
    if (element.loop) element.setAttribute('loop', 'true'); 
    if (element.controls) element.setAttribute('controls', 'true');
    
  })
  })
})
</script>
123

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

Примеры работы модификации

Для этого видео я задал необязательные настройки изменения кнопки плей на свою (они применятся ко всем видео сразу) + скругление углов

Примеры работы модификации 2