Перейти к содержимому

Video Element

Добавляйте native video и внешние платформы через один Builder element: четыре режима загрузки, poster, Modal, overlay и consent через YOOtheme Preferences.
Joomla! 5/6
YOOtheme Pro 5
PHP 7.4+
Скачать бесплатно
Поддержка

Внешнее видео загружается только по выбранному сценарию

Video Element принимает ссылку на ролик и сам формирует вывод для native video, YouTube, Vimeo, RuTube, VK Video, OK Video, Dzen, Cloudflare Stream и Yandex Cloud Video.

Режимы Eager, Lazy, On Click и On Click to Modal определяют момент загрузки. Для внешних сервисов consent-проверка удерживает URL iframe в инертном состоянии до разрешения YOOtheme Preferences.

Один URL вместо iframe-кода

Вставьте ссылку на поддерживаемую площадку. Helper нормализует источник и подбирает iframe или native video без ручной разметки.

Poster, заголовок и overlay остаются в Builder

Poster Frame, focal point, иконка, заголовок и переходы настраиваются рядом с источником. В eager/lazy заголовок выводится над или под видео; в click/modal — поверх poster.

Три состояния Video Element: poster с кнопкой запуска, сохранение focal point при широком и вертикальном кадрировании и цветной overlay с заголовком

Четыре режима для разных мест страницы

Выбор режима влияет на сетевые запросы, момент появления проигрывателя и набор доступных overlay-настроек.

Четыре режима Video Element: немедленная загрузка Eager, Lazy при входе в viewport, запуск по клику и открытие видео в модальном окне

Eager

Видео создаётся сразу. Подходит для основного ролика, когда источник должен быть готов без ожидания пересечения viewport.

Lazy

Загрузка начинается при входе элемента в viewport. Заголовок остаётся обычным элементом над или под видео.

On Click

До действия пользователя виден poster или штатная заглушка. После клика проигрыватель появляется в том же контейнере.

On Click to Modal

Poster работает как триггер UIkit Modal. Ширина, высота и ratio модального проигрывателя задаются отдельно.

Video Element в режимах On Click и Modal

Загрузка в контейнере

Запустить видео в контейнере

Запустить видео в контейнере

Запустить видео в контейнере

В модальном окне

Открыть видео в Modal

Открыть видео в Modal

Открыть видео в Modal

Источник, представление и consent проходят один pipeline

1. Source

Native video обрабатывается тегом video; поддерживаемые внешние ссылки проходят через provider helper.

2. Geometry

Width, Height и Ratio задают размеры. Некорректный ratio получает fallback 16:9, а YouTube Shorts — 9:16.

3. Loading

Eager и Lazy выводят inline media. Click создаёт проигрыватель внутри контейнера, Modal — внутри диалога при открытии.

4. Consent

Для внешнего сервиса iframe хранит URL в data-msgvideo-src; разрешение активирует его, отзыв выгружает iframe и возвращает заглушку.

Все публичные настройки Video Element 1.0.14

Группы и порядок повторяют вкладки Content, Settings и Advanced. Условия показа и defaults сверены с текущим msgvideo definition.

Content

Video
video

Источник native video или ссылка поддерживаемой платформы. Поле поддерживает dynamic source.

Width / Height
video_width / video_height

Размер проигрывателя. Если оба значения пусты, render использует базовую ширину 720 px.

Ratio
video_ratio

Формат 16:9 или 9:16; недоступен при заданной Height. Ошибочное или нулевое значение заменяется безопасным fallback.

Loading
video_loading

Default eager (пустое значение); доступны lazy, click и modal.

Modal Width / Height
modal_width / modal_height

Показываются только для modal. Если оба значения пусты, используется ширина 1280 px.

Poster Frame
poster

Необязательное изображение до старта видео. Доступно во всех режимах при заполненном Video; поддерживает dynamic source.

Poster Frame Focal Point
poster_focal_point

Девять позиций кадрирования от top-left до bottom-right. Доступно при заполненных Video и Poster Frame.

Modal Ratio
modal_ratio

Ratio модального проигрывателя; показывается для modal и недоступен при заданной Modal Height.

Icon
icon

Иконка триггера для click и modal.

Video Title
video_title

Доступное название видео. В eager/lazy выводится над или под media; в click/modal входит в overlay. Поддерживает dynamic source.

Title Position
title_position

Default bottom; доступны top и bottom. Показывается при заполненном Video Title.

Show controls
video_controls

Default включён. Доступно для native video; внешние iframe управляют controls параметрами своего URL.

Loop video
video_loop

Зацикливает native video. Показывается только для источника, который не является iframe.

Mute video
video_muted

Отключает звук native video. Показывается только для источника, который не является iframe.

Play inline on mobile devices
video_playsinline

Добавляет inline playback для native video на mobile; недоступно для iframe.

Autoplay
video_autoplay

Доступны Off, On и Inview. Поле активно при заполненном Video; ограничения браузера для autoplay со звуком сохраняются.
Settings — Video

Box Shadow
video_box_shadow

Доступны None, small, medium, large и xlarge.

Box Decoration
video_box_decoration

Доступны None, default, primary, secondary, shadow и mask.

Inverse style
video_box_decoration_inverse

Доступно только для decoration default, primary и secondary.

Height — Fill the available column space
height_expand

Растягивает native video по доступной высоте колонки. Недоступно для iframe.

Force viewport height
video_viewport_height

Задаёт высоту viewport для native video; недоступно при включённом Height expand.
Settings — Overlay

Style
overlay_style

Default overlay-default. Доступны None, overlay-default/primary и tile-default/muted/primary/secondary; только для click/modal.

Text Color
text_color

Доступны None, light, dark и hidden.

Text Hover Color
text_hover_color

Цвет заголовка при hover/focus для click/modal; доступен при заполненном Video Title.

Transition
title_transition

Default fade; Scale и Slide варианты. Доступно при Video Title в click/modal.

HTML Element
title_element

Default div; доступны h1–h6 и div. Активно при Video Title.

Icon Color
icon_color

Default light; доступны light и dark. Активно при выбранной Icon.

Icon Hover Color
icon_hover_color

Default light; задаёт второй цвет иконки при hover/focus.

Loading — Load image eagerly
image_loading

Poster по умолчанию lazy. Переключатель включает eager для poster в первом viewport.

Image Transition
image_transition

None, scale-up или scale-down. Доступно при Poster в поддерживаемом режиме.
Settings — General

Position
position

Normal flow, relative или absolute.

Left / Right / Top / Bottom
position_left / position_right / position_top / position_bottom

Offsets для relative/absolute. Противоположные стороны взаимоисключаются.

Z Index
position_z_index

Stack level 0–3 или Auto при заданной Position.

Blend
blend

Смешивает элемент с содержимым страницы штатным режимом Builder.

Margin Top / Bottom
margin_top / margin_bottom

Default default; доступны xsmall–xlarge, remove и auto. Недоступно при absolute position.

Max Width
maxwidth

Small–2X-Large; ограничивает ширину элемента.

Max Width Breakpoint
maxwidth_breakpoint

Breakpoint s–xl, от которого применяется Max Width.

Block Alignment / Breakpoint / Fallback
block_align / block_align_breakpoint / block_align_fallback

Left, center или right с breakpoint и fallback; доступны при Max Width вне absolute position.

Text Alignment / Breakpoint / Fallback
text_align / text_align_breakpoint / text_align_fallback

Left, center или right с отдельным breakpoint и fallback.

Animation
animation

Штатные Fade, Scale, Slide или Parallax; требует включённых анимаций Section.

Parallax
_parallax_button

Открывает штатную панель transform, opacity, blur, easing, target, breakpoint и start/end.

Visibility
visibility

Показывает или скрывает элемент относительно breakpoint s–xl.

Section/Row — Remove left or right padding
container_padding_remove

Убирает padding со стороны расширяющейся Section/Row; недоступно при absolute position.
Advanced

Name
name

Подпись узла в структуре Builder; на frontend не выводится.

Status
status

Штатное включение и отключение элемента.

Source
source

Dynamic source для поддерживаемых полей Video, Poster Frame, Focal Point, Video Title и Advanced.

ID
id

Пользовательский ID корневого элемента. Если поле пустое, runtime создаёт уникальный msgvideo….

Classes
class

Дополнительные CSS-классы корневого элемента.

Attributes
attributes

Дополнительные HTML-атрибуты, по одному на строку.

CSS
css

Element-local CSS. Подсказки включают .el-element, container, image, overlay, icon, title и video base selectors.

Transform
transform

Штатные transform-настройки Builder для элемента.

Consent удерживает внешний iframe до разрешения

RuTube, VK Video, OK Video, Dzen, Cloudflare Stream и Yandex Cloud Video используют общий сервис preferences.msg-external-video. YouTube и Vimeo остаются на штатных Preferences-сервисах YOOtheme.

Кнопка заглушки открывает Consent Manager. Она не выдаёт разрешение напрямую и не запускает click/modal-сценарий.

Жизненный цикл внешнего видео: URL отложен в data-src, загружается в src после разрешения и удаляется после отзыва согласия

Keyboard и focus

Click/modal container получает tabindex="0". Заголовок задаёт доступное имя iframe; focus-visible и открытие Modal нужно проверить на целевом frontend.

Отзыв разрешения

После revoke уже загруженный iframe выгружается, URL снова становится инертным, а consent-заглушка возвращается без дублирования DOM.

Responsive и Shorts

Width, Height и Ratio управляют геометрией. Для YouTube Shorts fallback меняется на 9:16; poster focal point сохраняет важную область при кадрировании.

Motion и autoplay

Overlay transitions и Builder Animation требуют проверки с prefers-reduced-motion. Autoplay подчиняется ограничениям браузера; для предсказуемого старта native video используйте muted.

Загрузки

PHP 8.3.0, Joomla 6 и YOOtheme Pro 5.0.43. Рекомендуемое окружение — PHP 8.4.

Расширение Video Element
Скачать бесплатно

Системные требования

Минимальные

PHP
7.4+
Joomla!
5
YOOtheme Pro
5

Рекомендуемые

PHP
8.3+
Joomla!
6
YOOtheme Pro
5

Расширение подключено к серверу обновлений MSGru. Joomla сообщит о новой версии, если на сайте включена проверка обновлений.

Поддержать разработку

Отсканируйте QR-код для перехода в сервис пожертвований CloudTips

Ваши пожертвования не облагаются налогом, но сервис берет комиссию за свои услуги.

Максимальная сумма 3000 ₽

Поддержать
Отсканируйте QR-код для перехода в сервис пожертвований Спасибо Мир

Ваши пожертвования не облагаются налогом, но сервис берет комиссию за свои услуги.

Сумма доната не ограничена

Поддержать

    Список изменений

    1.0.14

    Добавлено
    Интеграция внешних видеосервисов с настройками Preferences и Consent Manager в YOOtheme.
    Добавлено
    Предпросмотр внешних видеосервисов непосредственно в конструкторе YOOtheme.
    Добавлено
    Настраиваемый HTML-контент заглушки, отображаемой до получения согласия посетителя.
    Добавлено
    Ссылка на штатное окно управления Cookies в YOOtheme.
    Добавлено
    Подсказки постоянных CSS-селекторов элемента для стандартного механизма props.css
    Добавлено
    Устранено дублирование обработчиков при одновременной установке MSG Video Element и MSG Welcome Element.
    Изменено
    Настройки poster frame, focal point, modal и overlay перераспределены по контекстным группам.
    Изменено
    YouTube и Vimeo продолжают использовать штатные сервисы Preferences из YOOtheme.
    Изменено
    Заголовок видео теперь отображается во всех режимах
    Изменено
    Inverse style отображается только для совместимых вариантов box decoration.
    Удалено
    Удалена поддержка прекративших работу сервисов NUUM и PLVideo.

    1.0.10

    Добавлено
    Поддержка Yandex Cloud Video
    Изменено
    YOOtheme Pro 5
    Изменено
    Исправления в отображении некоторых свойст

    1.0.8

    Изменено
    Исправлена ошибка при заполнении поля css

    Лицензия

    Расширение распространяется бесплатно как есть, в соответствии с GNU GPL v3.
    Бесплатно

    • Скачивание без ограничений

    • Использование на любом количестве сайтов

    Платно

    • Помощь в установке и настройке

    • Техническая поддержка

    • Исправление проблем совместимости со сторонними расширениями и библиотеками

    • Доработка функционала под конкретные требования заказчика

    Загляните в раздел услуг

    Закажи разработку

    Компоненты любой сложности для Joomla! и не только: интеграция сторонних сервисов; большие пакетные решения; e-commerce.

    Заказать
    Наши услуги