Docs Runes Plan Blog Changelog

Embed

Embed external content from popular platforms. URLs are automatically detected and converted to the appropriate embed format. Supports YouTube, Vimeo, Twitter/X, CodePen, and Spotify.

Basic usage

Pass a URL and optional title to embed content from a supported provider.

{% embed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Example video" /%}

<figure data-rune="embed" typeof="VideoObject">
  <meta content="https://www.youtube.com/watch?v=dQw4w9WgXcQ" data-field="url" property="contentUrl">
  <meta content="video" data-field="type">
  <meta content="16:9" data-field="aspect">
  <meta content="Example video" data-field="title" property="name">
  <meta content="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" data-field="embed-url" property="embedUrl">
  <meta content="youtube" data-field="provider">
  <div data-name="fallback"></div>
</figure>

<figure typeof="VideoObject" class="rf-embed" data-rune="embed" data-density="compact" data-provider="youtube">
  <div class="rf-embed__wrapper" style="padding-bottom: 56.25%">
    <iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" title="Example video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe>
  </div>
  <div class="rf-embed__fallback">
    <meta content="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" data-field="embed-url" property="embedUrl" />
    <div data-name="fallback" class="rf-embed__fallback"></div>
  </div>
</figure>

With fallback content

Children become fallback content displayed when the embed cannot load.

{% embed url="https://example.com/video" %}
Video could not be loaded. [Watch on the original site](https://example.com/video).
{% /embed %}

<figure data-rune="embed" typeof="VideoObject">
  <meta content="https://example.com/video" data-field="url" property="contentUrl">
  <meta content="generic" data-field="type">
  <meta content="16:9" data-field="aspect">
  <meta content="" data-field="title" property="name">
  <meta content="https://example.com/video" data-field="embed-url" property="embedUrl">
  <meta content="generic" data-field="provider">
  <div data-name="fallback">
    <p>
      Video could not be loaded.
      <a href="https://example.com/video">Watch on the original site</a>
      .
    </p>
  </div>
</figure>

Video could not be loaded. Watch on the original site.

<figure typeof="VideoObject" class="rf-embed" data-rune="embed" data-density="compact" data-provider="generic">
  <div class="rf-embed__wrapper" style="padding-bottom: 56.25%">
    <iframe src="https://example.com/video" title="Embedded content" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe>
  </div>
  <div class="rf-embed__fallback">
    <meta content="https://example.com/video" data-field="embed-url" property="embedUrl" />
    <div data-name="fallback" class="rf-embed__fallback">
      <p>
        Video could not be loaded. 
        <a href="https://example.com/video">Watch on the original site</a>
        .
      </p>
    </div>
  </div>
</figure>

Supported providers

Provider	Example URL
YouTube	`https://www.youtube.com/watch?v=...` or `https://youtu.be/...`
Vimeo	`https://vimeo.com/...`
Twitter/X	`https://twitter.com/.../status/...`
CodePen	`https://codepen.io/.../pen/...`
Spotify	`https://open.spotify.com/...`
Generic	Any other URL (rendered as iframe)

Attributes

Attribute	Type	Default	Description
`url`	`string`	required	URL to embed
`type`	`string`	—	Content type (auto-detected from URL if omitted)
`aspect`	`string`	`16:9`	Aspect ratio: `16:9`, `4:3`, `1:1`, or `auto`
`title`	`string`	—	Accessible title for the iframe

Common attributes

All block runes share these attributes for layout and theming.

Attribute	Type	Default	Description
`width`	`string`	`content`	Page grid width: `content`, `wide`, or `full`
`spacing`	`string`	—	Vertical spacing: `flush`, `tight`, `default`, `loose`, or `breathe`
`inset`	`string`	—	Horizontal padding: `flush`, `tight`, `default`, `loose`, or `breathe`
`tint`	`string`	—	Named colour tint from theme configuration
`tint-mode`	`string`	`auto`	Colour scheme override: `auto`, `dark`, or `light`
`bg`	`string`	—	Named background preset from theme configuration