docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Free
  5. Video

Video ​

Responsive iframe from a video link. Common hosts are supported. VideoEmbedResolver parses the URL on save. The section is part of Free.

Video

URL instead of embed code ​

  • Paste URL instead of embed HTML in richtext
  • VideoEmbedResolver builds iframe for YouTube, Vimeo, Rutube
  • Responsive wrapper in chunk

Typical placement ​

  • Product overview on the homepage
  • How-to on support
  • Promo clip on a landing page

Page examples ​

Video URL ​

Paste the full Video URL from the browser bar, not embed HTML. Section title is optional.

Similar sections ​

Block parameters ​

ParameterValue
keyvideo
LayerPro
Categorymedia (media)
Chunkpagebuilderpro_video
Requirespro

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title) ​

Type text. Optional.

Video URL (video) ​

Type video. Required. Video URL. Site output is embed via VideoEmbedResolver.

Site output ​

Iframe inside pb-video. Aspect ratio comes from theme CSS.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "video": {
    "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    "embed_url": "https://www.youtube.com/embed/dQw4w9WgXcQ",
    "provider": "youtube"
  }
}

Chunk template ​

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>

See also ​