Embed / iframe

Components embed

Embed a YouTube, Vimeo, Maps or any URL via an iframe.

Markup

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

html

<div data-pb-block="embed" class="pb-embed" data-pb-embed-url="" style="font-family:inherit;">
  <div class="pb-embed__frame" style="position:relative;width:100%;aspect-ratio:16/9;background:#0f172a;border-radius:0.5rem;overflow:hidden;">
    <iframe class="pb-embed__iframe" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
    <div class="pb-embed__placeholder" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:0.85rem;text-align:center;padding:1rem;">Set an embed URL (YouTube, Vimeo, Maps, or any page) in the Settings panel.</div>
  </div>
</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="embed" 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.