Если хотите добавить на сайт фоновое видео формата .mp4 и без проблем настраивать его положение, размер и форму, то эта инструкция для вас. Вставка видео внутрь шейпа zero-блока решит все эти задачи. А еще такое видео можно анимировать, и все это будет работать также и на телефонах.
Я разбила данную инструкцию на два ключевых шага:
Оглавление:
Шаг 1. Получаем прямую ссылку на видео
Так как Тильда не хранит у себя видеофайлы, то нам потребуется загрузить видео на сторонний сервис и получить на него прямую ссылку, чтобы по этой ссылке открывалось непосредственно само видео.
Загрузить видеофайл можно в любое облачное хранилище (Google Диск, Dropbox, Яндекс Диск, Облако Mail.ru) или собственный хостинг. Я лично предпочитаю второй вариант, т.к. скорость загрузки видео будет в разы выше, и это никак не затормозит ваш сайт. Но такой способ платный, а поэтому я расскажу и про первый тоже на примере Google Диска.
Шаг 1.1. Получаем прямую ссылку на видео с Google Диска
Загрузите на диск видео и откройте к нему доступ по ссылке:
Скопируйте ссылку на файл и вставьте ее в любой текстовый редактор. У вас должна быть ссылка вида:
Как добавить видео в ТИЛЬДА | dropbox
https://drive.google.com/file/d/ 1GuSQ04-ItliRUXg8G-SPVQbx4N_EudvB /view?usp=sharing
Из этой ссылки вам нужно скопировать символы, которые являются идентификатором файла. В моем примере они выделены жирным текстом — после file/d/ и перед /view. А затем вставьте эти символы в конец вот этой ссылки:
https://drive.google.com/uc?export=downloadid= 1GuSQ04-ItliRUXg8G-SPVQbx4N_EudvB
Если вы перешли по получившейся ссылке, и у вас скачалось ваше видео, то значит вы все сделали правильно.
Шаг 1.2. Получаем прямую ссылку на видео с собственного хостинга
Где покупать хостинг — выбор за вами. Я остановилась на Beget (https://beget.com/ru/hosting/virtual), тариф Blog, SSL-сертификат в подарок (он нам понадобится).
После покупки хостинга на Beget перед вами откроется вот такая панель управления:
Зайдите в раздел «Домены и поддомены», купите там домен с любым именем (да, нужно будет еще потратиться и на домен).
Затем к купленному домену подключите SSL-сертификат по данной инструкции: https://beget.com/ru/kb/how-to/sites/podklyuchenie. (это займет несколько часов). Сертификат нужно подключать в обязательном порядке, т.к. без него ссылка на видео будет небезопасной, и Тильда не сможет открыть ее содержимое.
Как только все будет готово, в разделе «Домены и поддомены» вы увидите вот такую картину:
Теперь из панели управления перейдите в «Файловый менеджер», зайдите в папку с именем типа « ваш_логин.beget.tech », потоп в папку « public_html ».
Создайте здесь папку с именем сайта, куда вы хотите разместить видео, например « swiftdesign » (без пробелов). Этот шаг нужен исключительно для вашего удобства, чтобы не запутаться в файлах. Обычно в папке с именем сайта я создаю еще одну с названием типа файла, например « video » или « images ». Но если у вас всего один-два файла, то можно так не делать.
Тильда | Вставка видео напрямую из Dropbox
Далее в нужную папку загрузите сам файл, а его имя должно быть без пробелов. Готово! Теперь выпишите путь к файлу, который будет состоять из имени вашего домена и папок, которые вы создали внутри « public_html ».
Источник: swiftdesign.one
Лендинг на Tilda: как добавить видео?
Привет! Написали статью, полезную для всех, кто работает с конструктором Tilda и собирает на нем лендинги и сайты для своего проекта. Сегодня рассказываем, как быстро и без проблем добавить блок с видеопроигрывателем.
Tilda — простой и удобный конструктор сайтов, не требующий знаний верстки. Но не забывайте, что наполнение его качественным контентом — ваша задача. С помощью видео на лендинге вы сможете:
- устроить трансляцию;
- подробнее рассказать о продукте и о компании;
- дать видеоинструкцию;
- показать видеоотзывы;
- показать дорогу до вашего офиса или магазина;
- показать процесс взаимодействия с продуктом или услугой и др.;
Давайте разберемся, как добавить на ваш сайт видео.
Как добавить видео со сторонних ресурсов
Добавить любой блок на Tilda можно с помощью значка “+” между блоками или на пустой странице.
Рис.1. Кнопка добавления блока
После того, как вы добавили пустой блок, справа появляется окно с выбором контента для вашего блока. Чтобы добавить видео, выбирайте вкладку с соответствующим названием.
Рис.2. Вкладка с добавлением виде
После того, как вы выбрали нужную вкладку, Tilda предлагает вам множество ресурсов, с которых вы можете добавить контент. Самые популярные — Youtube и Vimeo, также видео можно вставить через код, выбрав “Видео HTML5”. Обратите внимание, что трансляции и добавление видео через код — варианты, доступные в оплаченных аккаунтах.
Рис.3. Кнопка редактирования контента
После того, как вы выбрали добавление видео через Youtube (или любой другой плеер), необходимо указать путь к вашему контенту. Для этого зайдите в настройки контента в вашем блоке. В строке “ссылка на Youtube ролик или его ID” вставьте соответствующий адрес. Вуаля, видео добавлено в ваш блок на Tilda!
Рис.4. Строка для добавления видео со стороннего ресурса
Остались вопросы по работе с конструктором Тильда?
Не нашли ответ на интересующий Вас вопрос? Или у вас возникла другая проблема, в работе с Tilda? Задавайте вопросы, которые Вас интересуют в комментариях, на них оперативно ответит специалист отдела разработки Convert Monster.
Источник: convertmonster.ru
Как добавить видео в 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
- блок 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
- Нажмите на блок видео, чтоб в правом меню настроек отобразились настройки блока с видео. Выберите ресурс, с которого будет добавлено видео и вставьте ссылку на него:
Опционально можно выставить автовоспроизведение, отключить звук, зациклить воспроизведение, и поставить место, с которого воспроизведение начнется и/или закончится.
Рекомендую самостоятельно загрузить обложку к этому видео. Сделать это можно в этих же настройках блока.
- Сохраните изменения.
Надеюсь, статья была полезная для вас.
Если остались какие-то вопросы, пишите из в комментариях. Без ответа не оставим никого
Источник: webgolovolomki.com