Виджет Видео позволяет добавить видеоролик на страницу сайта. Видео можно добавить двумя способами:
- Загрузить файл: загрузите видео прямо с компьютера или телефона, как фотографию. Сначала выкладывать его на YouTube или другие сервисы не нужно.
- URL-ссылка: встройте ролик, который уже опубликован на YouTube, Vimeo, ВКонтакте или Rutube
ВАЖНО: Видеофайлы можно загружать не только в виджет Видео, но и в виджет Галерея, Слайдер и фон блока.
1. Как добавить виджет Видео на страницу
Создайте страницу с типом Новая страница и добавьте виджет Видео, перетащив его в нужную область страницы. Выберите способ добавления: через вкладку Загрузить файл или URL-ссылка. После сохранения видео будет встроено на сайт.
Рассмотрим каждый способ размещения видео подробно.
Способ 1. Загрузить файл с устройства
Чтобы загрузить видео на страницу сделайте следующие шаги:
1. Добавьте виджет Видео на страницу сайта. На вкладке Загрузить файл нажмите кнопку выбора файла.
2. Выберите видео на компьютере или телефоне.
3. Дождитесь окончания загрузки. После неё видео ещё какое-то время обрабатывается на сервере: мы сами сжимаем и оптимизируем его, чтобы оно быстро и качественно воспроизводилось и не замедляло загрузку страницы. Заранее готовить или сжимать файл не нужно.
ВАЖНО: Технические требования к видеофайлу – формат MP4, MOV, кодеки H.264, H.265, лимит по размеру видео до 500 МБ.
Способ 2. Вставить ссылку на ролик
Чтобы встроить видео на страницу через ссылку сделайте следующие шаги:
1. На вкладке URL-ссылка вставьте ссылку на ролик.
2. Сохраните настройки и видео встроится на сайт.
Поддерживаются ссылки на видеоролики из YouTube, Vimeo, ВКонтакте и Rutube. Как получить ссылку в каждом сервисе, рассмотрим подробно в самой нижней части руководства – тут.
2. Настройки виджета Видео
Чтобы изменить видео, откройте настройки виджета по значку шестеренки в правом верхнем углу.
Для загруженного файла будут доступны настройки:
— Автоплей. Видео начнёт воспроизводиться само, как только появится на экране. При автовоспроизведении звук выключен, этого требуют браузеры.
— Без звука. Видео будет воспроизводится без звука.
— Зацикливание (Loop). Видео будет проигрываться по кругу без остановки.
— Обложка видео. Для изменения изображения, которое показывается до начала воспроизведения, загрузите обложку с устройства. Если обложку не загрузить, вместо неё покажется кадр из начала видео. Обложку можно заменить или удалить.
Для любого видео доступны следующие настройки:
— Замена ролика. Для изменения видео, добавьте новую ссылку в поле Ссылка на видео и сохраните изменения.
— Настройка ширины видеоролика. Перетащите бегунок Ширина видео в % в нужное значение и сохраните изменения.
— Выравнивание ролика. По умолчанию ролик будет размещен по центру, но вы можете выбрать выравнивание по левому или правому краю.
— Добавление подписи к видео. Добавьте текст в поле Подпись к видео и настройте для нее цвет и выравнивание. Сохраните изменения.
— Открывать видео во всплывающем окне. Эта настройка позволяет просматривать ролик в поп-ап. При этом на сайте останется превью ролика в виде изображения, кликнув на которое пользователь откроет ролик во всплывающем окне. При необходимости, изображение для превью можно добавлять свое.
3. Как получить ссылку на ролик в сервисах
Встроить можно только те видеролики, для которых в сервисе разрешено встраивание и нет ограничений доступа. Иначе при вставке ссылки появится ошибка. Если вы не хотите настраивать доступ в сервисе, загрузите видео напрямую на страницу файлом. Рассмотрим подробно как получить ссылку для встраивания ролика в поддерживаемых сервисах.
Как добавить ссылку на ролик из Vimeo
Для получения ссылки на видео, размещенного на Vimeo, необходимо нажать кнопку Share.
И скопировать ссылку в строке Link.
Обратите внимание, на сайт можно добавить только те ролики из Vimeo, для которых нет запрета для встраивания. При попытке добавить ролик, у которого активны эти настройки, вы увидите ошибку. Разрешить встраивание видео необходимо в вашем аккаунте на Vimeo. В блоке Share в разделе Privacy выберите один из вариантов: «Unlisted», «Hide from Vimeo» или «Public». А в разделе Embed — «Anywhere». При других настройках ролик не может быть встроен на сайт.
Плеер Vimeo подстраивается под размер вашего ролика. Это позволяет добавлять на сайт вертикальные ролики, снятые с мобильного устройства, и при этом у видео не будут добавляться поля проигрывателя.
Как добавить ссылку на ролик из ВКонтакте
Для получения ссылки на видео из ВКонтакте, вы можете нажать на ролик правой кнопкой мыши и выбрать опцию Скопировать ссылку на видео. Или можно открыть ролик и скопировать адрес в строке браузера, как на примере.
ВАЖНО: Для возможности добавить ролик из ВКонтакте, вам необходимо быть авторизованным в вашем аккаунте во ВКонтакте. Ролик должен быть в общем доступе.
Как добавить ссылку на ролик из RuTube
Перейдите на страницу ролика и скопируйте ссылку в адресной строке браузера.
Из RuTube можно добавить ролики, которые находятся как в общем доступе, а также ролики с доступом по ссылке. Ссылка на ролик, скрытый из общего просмотра, будет иметь специальный параметр — ключ доступа в виде цифр и букв сразу после ID видео. Пример:
Необходимо скопировать всю ссылку с ключом доступа и такой ролик будет доступен для вставки и просмотре на сайте.
RuTube предоставляет встраивание только горизонтального плеера. Если необходимо встроить на сайт видео Shorts, вам понадобится:
1. Откройте нужный ролик Shorts.
2. Замените слово «shorts» на «video» в ссылке на ролик (в адресной строке). Пример:
До замены - https://rutube.ru/shorts/a8ca6eeaef21e0e14cc305422a474370/
После замены - https://rutube.ru/video/a8ca6eeaef21e0e14cc305422a474370/
3. Нажмите Enter на клавиатуре или перезагрузите страницу.
4. Ролик откроется в горизонтальном плеере и такую ссылку вы можете скопировать и встроить на сайт.
Как добавить ссылку из YouTube. Настройка параметров видео.
Перейдите на страницу ролика и скопируйте ссылку в адресной строке браузера. Или можно скопировать ссылку, находясь на странице настроек вашего видео в аккаунте YouTube.
Вы можете также добавить ролик формата Shorts. Для получения ссылки на ролик формата Shorts в YouTube, вам нужно перейти на сам ролик и скопировать в адресной строке только часть ссылки после shorts/. Пример на скриншоте.
Добавьте скопированную часть к эту адресу https://www.youtube.com/watch?v=
Таким образом у вас получится ссылка в формате https://www.youtube.com/watch?v=идентификатор_вашего_ролика
Полученную ссылку вы можете добавить в виджет.
С YouTube можно добавить ролики, для которых нет запрета для встраивания и нет ограничений доступа. При попытке добавить ролик, у которого есть ограничения доступа или не активна настройка встраивания, вы также увидите ошибку. Разрешить встраивание видео необходимо в вашем аккаунте на YouTube.
Для видео с YouTube можно добавить параметры, которые позволят более точно управлять воспроизведением ролика и его отображением. Параметры добавляются в ссылку ролика через амперсанд (&). Примеры параметров:
- запрет показа похожих роликов — rel=0.
- Автозапуск ролика — autoplay=1.
- Запрет на управление воспроизведением ролика с помощью клавиатуры — disablekb=1. Теперь «пробелом» видео не остановить.
- Запрет на «разворачивание» на весь экран — fs=0.
- Воспроизведение видео через N секунд после загрузки — start=N.
- Воспроизведение видео по кругу — loop=1.
Например, если прописать параметры видео YouTube таким образом https://www.youtube.com/watch?v=HWxduBhTGxc&rel=0&autoplay=1&mute=1&start=23, то произойдёт автозапуск ролика с 23-й секунды, а также не будут отображаться «похожие» видео в конце его воспроизведения.
ВАЖНО: большинство браузеров ограничивают автовоспроизведение роликов, поэтому параметр autoplay=1 работает только в паре с параметром mute=1.
Параметр loop работает только, когда указан параметр playlist. Чтобы «закольцевать» одно видео, установите для параметра loop значение 1, а для параметра playlist укажите тот же идентификатор видео, что и в URL. Пример: https://www.youtube.com/watch?v=RyfpoHgGVC8&loop=1&playlist=RyfpoHgGVC8
Более подробный список параметров вы найдете по ссылке Параметры проигрывателя.