docs.modx.pro
PageBuilder
PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
  • MODX 3
  • PHP 8.2
  • Vue 3
Зависимости
  1. Компоненты
  2. PageBuilder
  3. Каталог секций
  4. Free
  5. Видео

Видео ​

Responsive iframe по ссылке на ролик. Поддерживаются популярные хостинги. URL разбирает VideoEmbedResolver при сохранении. Секция входит в Free.

Видео

URL вместо embed-кода ​

  • URL вместо embed-кода в richtext
  • VideoEmbedResolver подставляет iframe под YouTube, Vimeo, Rutube
  • Responsive-обёртка в chunk

Типичные места ​

  • В обзоре продукта на главной
  • В инструкции на странице поддержки
  • Для промо-ролика на лендинге

Примеры страниц ​

URL видео ​

Вставьте полный URL видео из адресной строки браузера, не embed-код. Заголовок секции необязателен.

Похожие секции ​

  • Hero с фоновым изображением, если видео не нужно
  • Structured content для встроенного media в статье

Параметры блока ​

ПараметрЗначение
keyvideo
СлойPro
Категориямедиа (media)
Chunkpagebuilderpro_video
Требованияpro

Поля в редакторе ​

Заполните поля в инспекторе секции на ресурсе. Описание типов полей: справочник типов.

Заголовок (title) ​

Тип text. Необязательное.

URL видео (video) ​

Тип video. Обязательное. URL ролика. На сайте. embed через VideoEmbedResolver.

Что видит посетитель ​

Iframe в блоке pb-video. Соотношение сторон сохраняется в CSS темы.

Данные секции ​

Пример JSON после сохранения секции. Для media, video и map значения на выводе могут быть обогащены:

json
{
  "title": "Заголовок секции",
  "video": {
    "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    "embed_url": "https://www.youtube.com/embed/dQw4w9WgXcQ",
    "provider": "youtube"
  }
}

Шаблон chunk ​

Fenom chunk pagebuilderpro_video:

fenom
<section class="pb-section pb-section--video pb-video{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="video"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-video__inner">
    {if $title}
      <h2 class="pb-heading pb-video__title">{$title|escape}</h2>
    {/if}
    {if $video_provider}
      {set $providerLabel = $video_provider == 'youtube' ? 'YouTube' : ($video_provider == 'vimeo' ? 'Vimeo' : ($video_provider == 'rutube' ? 'Rutube' : $video_provider))}
      <p class="pb-video__provider">{$providerLabel|escape}</p>
    {/if}
    {if $video_embed_url}
      <div class="pb-video__embed">
        <iframe src="{$video_embed_url|escape}" title="{$title|default:'Video'|escape}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>
      </div>
    {elseif $video_watch_url}
      <p><a class="pb-button" href="{$video_watch_url|escape}">{'pagebuilder_fe_video_watch' | lexicon}</a></p>
    {/if}
  </div>
</section>

Связанные страницы ​