На этой странице собраны примеры различных настроек для шорткода. Под примерами почти всегда есть исходный код, чтобы вы могли разместить такой же блок у себя на сайте.
По умолчанию все блоки LazyLoad, с отложенной загрузкой. Это значит, что они не загружают автоматически видео с внешних площадок, как это происходит при обычном встраивании видео, когда на странице сразу отображается iframe и начинает загружать внешние ресурсы.
Самый простой блок
Выводятся просто ссылки на платформы, по клику загружается iframe. До выбора площадки внешние ресурсы не грузятся.
[omnivideo youtube="https://www.youtube.com/watch?v=cYApRAKeAs0" vk="https://vk.com/video-31038184_456243182" rutube="https://rutube.ru/video/ab50563d117081e183603a3e1ae46024/" /]
Пример блока с заголовком и описанием
Аналогичный пример, только добавлен вывод заголовка и описания. Для заголовка по умолчанию используется тег <div>
, но при необходимости можно поменять на h2-h6 или любой другой через атрибут title_tag="h2"
.
[omnivideo title="Видео о новом Voyah Free" youtube="https://www.youtube.com/watch?v=cYApRAKeAs0" vk="https://vk.com/video-31038184_456243182" rutube="https://rutube.ru/video/ab50563d117081e183603a3e1ae46024/"]Это передовой кроссовер премиум-класса, созданный для тех, кто стремится к большему и смотрит в будущее. Он сочетает в себе надежность, динамику спорткара и экологичность, позволяя вам наслаждаться каждой поездкой с заботой о планете.[/omnivideo]
Дефолтный плеер
Блок может быть с выбранным видео по умолчанию, который будет загружен сразу после загрузки страницы, например, Rutube. Только в этом варианте нет LazyLoad, т.к. мы указываем автоматическую загрузку плеера, заданного в атрибуте default="rutube"
.
[omnivideo default="rutube" youtube="..." vk="..." rutube="..."]
Постер на фоне
Можно добавить постер (картинку) на фон, чтобы смотрелось как полноценное видео с выбором источника воспроизведения. Задается ссылкой на картинку в атрибуте poster
.
[omnivideo poster="https://.../image.jpg" youtube="..." vk="..." rutube="..."]
Автоматический постер на фоне
Есть возможность подтянуть постер автоматически с YouTube или Vimeo. Он будет автоматически загружен на ваш хостинг, чтобы избежать внешних запросов. Дополнительно здесь задали другую иконку icon="play-2"
.
[omnivideo poster="auto" icon="play-2" youtube="..." vk="..." rutube="..."]
Постер + дефолтный плеер
Можно вывести и постер, и выбрать плеер, который будет загружен только по клику на постер. Несмотря на заданный default
плеер, здесь сработает LazyLoad из-за постера. В примере ниже видео будет загружаться с ВК, т.к. он указан по умолчанию. И третий тип иконки.
[omnivideo default="vk" poster="auto" icon="play-3" youtube="..." vk="..." rutube="..."]
Один источник
Если источник только один — в стардартном стиле блок с ссылкой прячется. Хорошая замена для всех видео, которые были загружены только на YouTube. В статье остается только картинка, а сам iframe появится только после клика.
[omnivideo poster="auto" icon="play-4" youtube="..."]
Вариант с другим, простым стилем через атрибут style="simple"
и иконка YouTube icon="youtube"
.
[omnivideo poster="auto" icon="youtube" style="simple" youtube="..."]
Вариант со стилем cover, в нем блок с ссылкой не прячется, а выводится поверх постера.
MP4
Дополнительно можно указать MP4 файл, который откроется в теге video.
[omnivideo poster="auto" mp4="https://.../file.mp4"]
Другие источники
Мы будем добавлять все популярные площадки, которые позволяют встраивание на страницу. Присылайте примеры нам в поддержку.
Дзен добавляется не прямой ссылкой, описали в инструкции.
[omnivideo dzen="..." ok="..." vimeo="..." kinescope=""]
Изменение порядка
В атрибуте order можно задать свой порядок вывода платформ. Можно задать только часть платформ, которые вы хотите видеть первыми, а остальные будут автоматически дополнены.
[omnivideo order="vk,youtube" style="simple-2"]
Отключение подписей под иконками
Есть два атрибута, позволяющие отключить либо иконки и оставить только название платформы, либо отключить подписи и оставить только иконки.
[omnivideo show_titles="0" style="cover" poster="auto"]
Псевдоссылки
Если вы не хотите выводить внешние ссылки на площадки, можно заменить их псевдо-ссылками с помощью атрибута pseudo=1
. Ссылки заменяются на тег <span>
и работают через JS.
Подробнее обо всех параметрах шорткода читайте в документации.
Различные стили (дизайн) блоков
Мы вынесли на отдельную страницу все примеры стилей, которые есть в блоке.