Docs

Runes

Themes

Extend

Project

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" data-rune-fields="{&quot;provider&quot;:&quot;youtube&quot;}">
  <meta content="https://www.youtube.com/watch?v=dQw4w9WgXcQ" property="contentUrl">
  <meta content="Example video" property="name">
  <meta content="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" property="embedUrl">
  <div style="padding-bottom: 56.25%" data-name="wrapper">
    <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 data-name="fallback"></div>
</figure>

<figure typeof="VideoObject" class="rf-embed" data-provider="youtube" data-rune="embed" data-density="compact">
  <meta content="https://www.youtube.com/watch?v=dQw4w9WgXcQ" property="contentUrl" />
  <meta content="Example video" property="name" />
  <meta content="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" property="embedUrl" />
  <div style="padding-bottom: 56.25%" data-name="wrapper" class="rf-embed__wrapper">
    <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 data-name="fallback" class="rf-embed__fallback"></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" data-rune-fields="{&quot;provider&quot;:&quot;generic&quot;}">
  <meta content="https://example.com/video" property="contentUrl">
  <meta content="https://example.com/video" property="embedUrl">
  <div style="padding-bottom: 56.25%" data-name="wrapper">
    <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 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-provider="generic" data-rune="embed" data-density="compact">
  <meta content="https://example.com/video" property="contentUrl" />
  <meta content="https://example.com/video" property="embedUrl" />
  <div style="padding-bottom: 56.25%" data-name="wrapper" class="rf-embed__wrapper">
    <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 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>
</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