Как отключить автозапуск видео tilda

[Фича 22] Видео с автоплеем в объекте

Сайтодел

Привет всем любителям тильды! Изучая сайты с курсами наткнулся на один элемент, который часто вставляют на сайты и понял, что его разбора у нас его не было.

Это проигрывающееся видео в каком-либо объекте. Я сделаю его в айфоне. Делается эффект очень просто, но не рассказать о нём я просто не мог. Приступим.

Как выглядит?

Примерно так. В моём случае в качестве объекта выступает айфон, Вы же можете взять любой другой. Например ноутбук или телевизор.

Как сделать?

Для начала нам нужен сам объект. У меня это айфон, где на месте экрана есть вырезаное окно. Найти такие клипарты можно в гугле, либо просто скачать мокап и немного переделать его. Забирайте мой:

Идём в тильду

Переходим к тильде, добавляем на страницу Zero Block.

Жмём на крестик в верхнем левом углу и выбираем «Add image». Добавляем туда наше изображение с объектом.

Для удобности я размещу жёлтый блок под наше изображение. Так будет удобнее видеть границы рамок экрана.

Опять обращаемся к крестику, но на этот раз выбираем «Add Video». На странице появляется блок для вставки видео. Перетаскиваем его поверх изображения с объектом и подгоняем его под размеры экрана.

Открываем настройки блока с видео. Сюда мы можем выгрузить видео с двух видеохостингов:

Я буду работать с ютубом. Перехожу туда, ищу вертикальное видео (айфон стоит вертикально). Мне понравилось это: https://youtu.be/kOjD7eLTmFY

Жмём «Поделиться» и забираем ссылку:

Вставляем её в настройках блока с видео.

Далее устанавливаем следующие настройки:

Autoplay: autoplay — видео будет воспроизводиться автоматически, при загрузке страницы
Mute: включить/выключить звук
Loop: зацикливание видео
Start sec/end sec: таймкоды, если мы хотим чтобы видео началось или закончилось на определённой секунде

Закрываем настройки, сохраняем.

Удаляем блок, который мы использовали в качестве подложки. Помещаем блок с видео ПОД блок с объектом.

Готово! Сохраняем, публикуем и наслаждаемся. Таким образом видео нельзя будет остановить или перемотать самостоятельно. Единственный минус — это интерфейс ютуба, который при желании можно перекрыть одноцветными шейпами.

Успехов! Ваш, сайтодел.

Как включить автоматическое воспроизведение видео?

C версии Google Chrome 66 (и Mozilla Firefox 66) вводятся новые критерии, которым сайты должны соответствовать, чтобы им разрешили автоматически начинать воспроизведения видео со звуком.

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

Если видео на вашем сайте не является основным контентом, то для вашего сайта Google Chrome сформирует правило — никогда не воспроизводить видео со звуком.

В таком случае стоит отключить звук у видео:

Если вы используете Zero Block, то нужно отметить настройку «Mute: Mute»:

Если вы используете обложку, то нужно убрать галочку с «Не выключать звук у видео»:

К сожалению, мобильные устройства не поддерживают фоновое видео. Это ограничение всех мобильных устройств, не Тильды.

Как fancybox запредтить автовоспроизведение видео?

При открытии данного html как страницы видео не воспроизводится, но если этот же контент открыть попапом, через fancybox, тол видео сразу начинает проигрываться.
В интернете нагуглит только как отключить автовоспроизведение для видео с youtube

youtube : < autoplay: 0 >,

этот способ не помогает.

Как можно решить проблему?

Вопрос задан более года назад
104 просмотра

Как добавить видео в Tilda

Вставить видео на страницу сайта на Тильде не составит особого труда. Для этого есть специальные готовые решения в стандартных блоках Тильды, а также в Zero-block.

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

В какие блоки и как вставить видео поговорим в этой статье.

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

Начнем, пожалуй, с самого раздела Видео

Раздел Видео

блок VD01

В этот блок вы сможете вставить видео из Youtube. Обложка подтягивается автоматически.

блок VD03

В этот блок вы сможете вставить видео из Vimeo. Обложка подтягивается автоматически.

блок VD04

Простая кнопка для воспроизведения видео. По нажатию на кнопку открывается видео-плеер Youtube.

блок VD05

В это блок вы сможете добавить видео, загруженной на ваш хостинг или взятое с другого сайта (в этом случае вы полагаетесь на другой сервис). Формат видео может быть .MP4, .WEBM. Вам нужно будет в «Контенте» блока поставить ссылку на это видео. Также, не забудьте загрузить обложку для видео.

блок VD06

В этот блок можно вставить два видео, загруженных в Youtube. Обложки подтягиваются автоматически. Можно добавить текст под каждым роликом.

блок VD06A

В этот блок можно вставить два видео, загруженных в Vimeo. Обложки подтягиваются автоматически. Можно добавить текст под каждым роликом.

блок VD07

В блок можно поставить ссылку на COUB — видео

блок VD08

Блок представляет из себя Текст и видео из Youtube. Ширину колонок можно менять. Сюда же можно добавлять кнопку под текст.

блок VD09

Всплывающий Pop-up блок с Youtube видео

блок VD10

Всплывающий Pop-up блок с видео из Vimeo

блок VD11

Блок с Youtube-видео. Сюда можно загрузить собственную обложку. Кроме этого, можно добавить Подзаголовок, Заголовок, Описание и Текст на обложку видео

блок VD12

Блок разделенный на две части: слева — видео из Youtube, справа — картинка. Обложка видео подтягиваются автоматически. Ширину колонок можно менять. Под картинкой можно добавить текст.

блок VD13

Блок c Youtube трансляцией. Сюда можно добавить живой чат, вставив html-код в соответсвующее поле.

блок VD14

Блок видео-плейлист. В «Контенте» блока можно вставить видео и с Youtube, и с Vimeo. Вставлять видео нужно в формате «ссылка; заголовок видео; длительность видео; описание».

Другие стандартные блоки

Кроме вышеперечисленных блоков, видео можно добавлять:

в обложки: CR01, CR02, CR06, CR07, CR08, CR10, CR11 , CR12 , CR15 , CR16, CR17 , CR18 , CR19 , CR19A , CR21 , CR22 , CR22A , CR27 , CR28 , CR36 , CR37 , CR38 , CR40 , CR41;
в галереи: GL01, GL06;
в текстовый блок: TX14;
в форму: BF402N;
о проекте: AB701;

Как добавить Видео в Zero-block

Создайте Zero-block и зайдите в его редактирование.
В левом верхнем углу нажмите на «плюсик» и выберите Add VIdeo

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

Опционально можно выставить автовоспроизведение, отключить звук, зациклить воспроизведение, и поставить место, с которого воспроизведение начнется и/или закончится.

Рекомендую самостоятельно загрузить обложку к этому видео. Сделать это можно в этих же настройках блока.

Сохраните изменения.

Надеюсь, статья была полезная для вас.

Если остались какие-то вопросы, пишите из в комментариях. Без ответа не оставим никого