Video

Components video

A self-hosted HTML5 video player.

Markup

Drops in as data-pb-block="video".

html

<div data-pb-block="video" class="pb-video" style="max-width:100%;border-radius:var(--pb-radius,0.75rem);overflow:hidden;background:#000;">
  <video class="pb-video__el" controls playsinline poster="https://placehold.co/1280x720/0f172a/64748b?text=Video" style="display:block;width:100%;height:auto;">
    <source src="" type="video/mp4">
  </video>
</div>

Settings

Interactive behaviour is built in; on top of that every block supports:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="video" so it imports as a labelled, editable component.
Interactive out of the box: Ships with Alpine state baked in (x-data, @click, x-show, x-transition) — open/close, tabs and toggles work with no wiring. These owner-authored blocks are trusted and keep their executable directives.