Вставка видео на страницу
Есть 3 основных метода вставки видео: вставка YouTube, Vimeo и возможность добавить прямую ссылку на видео на стороннем сервере (HTML5 видео). Выберите подходящий вам блок, перейдите в Контент блока и вставьте ссылку на него.
Особенности вставки видео с YouTube
Видео с YouTube можно вставить в блоках VD01 (одно видео), VD04 (показ после нажатия на кнопку Play), VD06 (два видео), VD08 (видео и текст), VD09 (попап с видео), VD11 (видео со своей обложкой), VD12 (в комбинации с изображением в ряд), VD14 (плейлист), некоторых блоках с галереей, а также блоках с полноэкранным фоном с изображением в качестве фона (подробнее про вставку видео фоном).
Для вставки видео достаточно ссылки и чтобы видео было публичным и не имело запрета для вставки на сторонних сайтах в настройках приватности.
Чтобы видео воспроизводилось с определенного момента, вставьте фрагмент ?start= и после него укажите нужное время в секундах от начала ролика. Например, XEfDYMngJeE?start=5025. В таком случае видео начнет воспроизводиться с 5025 секунды. Быстро скопировать время можно, щелкнув правой кнопкой по плееру и выбрав пункт «Скопировать URL видео с привязкой ко времени».
Особенности вставки видео с Vimeo
Видео с Vimeo можно вставить в блоках VD03 (одно видео), VD06A (два видео), VD08 (видео и текст), VD10 (попап с видео), VD11 (видео со своей обложкой) и VD14 (плейлист) и некоторых блоках с галереей. В качестве фона видео с Vimeo вставить не получится.
Если ваше видео закрыто настройками приватности в Vimeo, то у него появится дополнительная комбинация цифр и букв в конце ссылки после номера видео. Чтобы видео воспроизводилось, добавьте эту комбинацию в поле Vimeo Private Link Hash.
Особенности вставки видео с стороннего сервера (HTML5-видео)
Если ваше видео не находится на данных видеохостингах, то его можно загрузить на собственный сервер и вставить в блоки с HTML5 видео. Это блоки VD05 (одно видео), VD08 (видео и текст), VD11 (видео со своей обложкой) и VD15 (HTML5 видео в попапе) и некоторые блоки с галереей. Также HTML5 видео можно вставить в качестве фона в блоки с полноэкранным фоном (подробнее про вставку видео фоном).
Чтобы добавить такое видео на страницу, нужно получить файл видео в формате webm и mp4. Сконвертировать видео в эти форматы можно с помощью онлайн-конвертеров или в программах редактирования или конвертации видео. Далее нужно разместить его на хостинге и получить прямую ссылку на файл. Обратите внимание, что не все файловые хранилища имеют такую возможность и с большой вероятностью нужно будет использовать платный файловый хостинг, например, Selectel.
З агрузить свой видеофайл на Тильду не получится, но можно использовать сторонние сервисы, которые отдают прямую ссылку на файл.
Некоторые из популярных облачных сервисов тоже отдают прямую ссылку на файл, например, Google Drive (инструкция ниже).
Как добавить видео в тильду не из ютуба
1. Общие положения
Настоящая политика обработки персональных данных составлена в соответствии с требованиями Федерального закона от 27.07.2006. №152-ФЗ «О персональных данных» и определяет порядок обработки персональных данных и меры по обеспечению безопасности персональных данных Петров Всеволод Вальдемарович (далее – Оператор).
- Оператор ставит своей важнейшей целью и условием осуществления своей деятельности соблюдение прав и свобод человека и гражданина при обработке его персональных данных, в том числе защиты прав на неприкосновенность частной жизни, личную и семейную тайну.
- Настоящая политика Оператора в отношении обработки персональных данных (далее – Политика) применяется ко всей информации, которую Оператор может получить о посетителях веб-сайта https://madeon.pro.
- Автоматизированная обработка персональных данных – обработка персональных данных с помощью средств вычислительной техники;
- Блокирование персональных данных – временное прекращение обработки персональных данных (за исключением случаев, если обработка необходима для уточнения персональных данных);
- Веб-сайт – совокупность графических и информационных материалов, а также программ для ЭВМ и баз данных, обеспечивающих их доступность в сети интернет по сетевому адресу https://madeon.pro;
- Информационная система персональных данных — совокупность содержащихся в базах данных персональных данных, и обеспечивающих их обработку информационных технологий и технических средств;
- Обезличивание персональных данных — действия, в результате которых невозможно определить без использования дополнительной информации принадлежность персональных данных конкретному Пользователю или иному субъекту персональных данных;
- Обработка персональных данных – любое действие (операция) или совокупность действий (операций), совершаемых с использованием средств автоматизации или без использования таких средств с персональными данными, включая сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (распространение, предоставление, доступ), обезличивание, блокирование, удаление, уничтожение персональных данных;
- Оператор – государственный орган, муниципальный орган, юридическое или физическое лицо, самостоятельно или совместно с другими лицами организующие и (или) осуществляющие обработку персональных данных, а также определяющие цели обработки персональных данных, состав персональных данных, подлежащих обработке, действия (операции), совершаемые с персональными данными;
- Персональные данные – любая информация, относящаяся прямо или косвенно к определенному или определяемому Пользователю веб-сайта https://madeon.pro;
- Пользователь – любой посетитель веб-сайта https://madeon.pro;
- Предоставление персональных данных – действия, направленные на раскрытие персональных данных определенному лицу или определенному кругу лиц;
- Распространение персональных данных – любые действия, направленные на раскрытие персональных данных неопределенному кругу лиц (передача персональных данных) или на ознакомление с персональными данными неограниченного круга лиц, в том числе обнародование персональных данных в средствах массовой информации, размещение в информационно-телекоммуникационных сетях или предоставление доступа к персональным данным каким-либо иным способом;
- Трансграничная передача персональных данных – передача персональных данных на территорию иностранного государства органу власти иностранного государства, иностранному физическому или иностранному юридическому лицу;
- Уничтожение персональных данных – любые действия, в результате которых персональные данные уничтожаются безвозвратно с невозможностью дальнейшего восстановления содержания персональных данных в информационной системе персональных данных и (или) результате которых уничтожаются материальные носители персональных данных.
- Фамилия, имя, отчество;
- Электронный адрес;
- Номера телефонов;
- Также на сайте происходит сбор и обработка обезличенных данных о посетителях (в т.ч. файлов «cookie») с помощью сервисов интернет-статистики (Яндекс Метрика и Гугл Аналитика и других).
- Вышеперечисленные данные далее по тексту Политики объединены общим понятием Персональные данные
- Цель обработки персональных данных Пользователя — заключение, исполнение и прекращение гражданско-правовых договоров; предоставление доступа Пользователю к сервисам, информации и/или материалам, содержащимся на веб-сайте https://mysite.ru; уточнение деталей заказа.
- Также Оператор имеет право направлять Пользователю уведомления о новых продуктах и услугах, специальных предложениях и различных событиях. Пользователь всегда может отказаться от получения информационных сообщений, направив Оператору письмо на адрес электронной почты seva@madeon.pro с пометкой «Отказ от уведомлениях о новых продуктах и услугах и специальных предложениях».
- Обезличенные данные Пользователей, собираемые с помощью сервисов интернет-статистики, служат для сбора информации о действиях Пользователей на сайте, улучшения качества сайта и его содержания.
- Оператор обрабатывает персональные данные Пользователя только в случае их заполнения и/или отправки Пользователем самостоятельно через специальные формы, расположенные на сайте https://madeon.pro. Заполняя соответствующие формы и/или отправляя свои персональные данные Оператору, Пользователь выражает свое согласие с данной Политикой.
- Оператор обрабатывает обезличенные данные о Пользователе в случае, если это разрешено в настройках браузера Пользователя (включено сохранение файлов «cookie» и использование технологии JavaScript).
Безопасность персональных данных, которые обрабатываются Оператором, обеспечивается путем реализации правовых, организационных и технических мер, необходимых для выполнения в полном объеме требований действующего законодательства в области защиты персональных данных.
- Оператор обеспечивает сохранность персональных данных и принимает все возможные меры, исключающие доступ к персональным данным неуполномоченных лиц.
- Персональные данные Пользователя никогда, ни при каких условиях не будут переданы третьим лицам, за исключением случаев, связанных с исполнением действующего законодательства.
- В случае выявления неточностей в персональных данных, Пользователь может актуализировать их самостоятельно, путем направления Оператору уведомление на адрес электронной почты Оператора seva@madeon.pro с пометкой «Актуализация персональных данных».
- Срок обработки персональных данных является неограниченным. Пользователь может в любой момент отозвать свое согласие на обработку персональных данных, направив Оператору уведомление посредством электронной почты на электронный адрес Оператора seva@madeon.pro с пометкой «Отзыв согласия на обработку персональных данных».
- Оператор до начала осуществления трансграничной передачи персональных данных обязан убедиться в том, что иностранным государством, на территорию которого предполагается осуществлять передачу персональных данных, обеспечивается надежная защита прав субъектов персональных данных.
- Трансграничная передача персональных данных на территории иностранных государств, не отвечающих вышеуказанным требованиям, может осуществляться только в случае наличия согласия в письменной форме субъекта персональных данных на трансграничную передачу его персональных данных и/или исполнения договора, стороной которого является субъект персональных данных.
- Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты seva@madeon.pro.
- В данном документе будут отражены любые изменения политики обработки персональных данных Оператором. Политика действует бессрочно до замены ее новой версией.
- Актуальная версия Политики в свободном доступе расположена в сети Интернет по адресу http://madeon.pro/policy.
Как добавить видео в 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
- Нажмите на блок видео, чтоб в правом меню настроек отобразились настройки блока с видео. Выберите ресурс, с которого будет добавлено видео и вставьте ссылку на него:
Опционально можно выставить автовоспроизведение, отключить звук, зациклить воспроизведение, и поставить место, с которого воспроизведение начнется и/или закончится.
Рекомендую самостоятельно загрузить обложку к этому видео. Сделать это можно в этих же настройках блока.
- Сохраните изменения.
Надеюсь, статья была полезная для вас.
Если остались какие-то вопросы, пишите из в комментариях. Без ответа не оставим никого
Как добавить video в ZeroBlock и запускать его при наведении в Tilda
В этот элемент вставили первый код
В этом коде указали ссылку на наш mp4 файл (не youtube, не vimeo)
https://310401.selcdn.ru/MIXED/Mahmut-Orhan-Without_You.mp4
(как добавлять видео)
И ссылку на обложку
https://static.tildacdn.com/tild6565-6530-4131-a265-376661643334/buray-mecnun-mahmut-.jpg
И ссылку на кнопку https://yandex.ru
Добавили второй код в блок Другое — Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Добавляем видео в Zero. Запускаем его при наведении. Загружаем mp4 файл на dropbox
Фрагмент видео
Библиотека для примера
.videowrapper < position: relative; overflow: hidden; >.videowrapper, .tn-atom.tn-atom__html < width: inherit; height: inherit; >.bg_image < position: absolute; top: 0; left: 0; background-size: cover; background-position: center; width: 100%; height: 100%; pointer-events: none; transition: all 0.2s; >.video-btn < position: absolute; background-color: rgb(0 0 0 / 70%); width: 100%; height: 40px; display: flex; align-items: center; box-sizing: border-box; bottom: 0; left: 0; transition: all 0.2s; transform: translateY(100%); backdrop-filter: invert(1); >.video-btn a, .video-btn div < width: inherit; height: inherit; >.video-btn div < display: flex; align-items: center; padding-left: 20px; >.video-btn div < transition: all 0.2s 0.2s; transform: translateY(100%); >.videowrapper:hover .video-btn div < transform: translateY(0); >.video-btn a < font-family: 'Open Sans',Arial,sans-serif; font-weight: 300; color: #fff !important; font-size: 16px; >.videowrapper:hover .video-btn < transform: translateY(0); >.videowrapper:hover .bg_image video
Доступ на 1 месяц
ко всем видео ( список )
400 р. / мес
- Поддержка
- Советы
- Подсказки
Подписаться на 1 месяц
Доступ на 1 год
ко всем видео ( список )
1800 р. / год
- Поддержка
- Советы
- Подсказки
- Скидка на курсы 10%
Подписаться на 1 год
Бесконечный доступ
ко всем видео ( список )
- Поддержка
- Советы
- Подсказки
- Скидка на курсы 20%
Подписаться без ограничений
Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.