Embeds

Embeds allow you to include external content from various platforms directly in your documentation. They support YouTube videos, Vimeo videos, CodePen demos, CodeSandbox projects, and other iframe-compatible content. Each embed automatically optimizes the source URL and includes proper security attributes.

PropertiesCopied!

srcCopied!

string required

The URL of the content to embed. The component automatically detects and optimizes URLs for supported platforms:

YouTube: Converts watch URLs to embed format
Vimeo: Converts video URLs to player format
CodePen: Converts pen URLs to embed format with preview settings
CodeSandbox: Supports embed URLs with proper sandbox attributes
Other: Generic iframe embedding with security attributes

captionCopied!

string optional

A descriptive caption for the embedded content. This appears below the embed and provides context or explanation.

altCopied!

string optional

Alternative text for accessibility. This describes the embedded content for screen readers and other assistive technologies.

ExamplesCopied!

YouTube VideoCopied!

Never Gonna Give You Up - Rick Astley

<scalar-embed
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  caption="Never Gonna Give You Up - Rick Astley">
</scalar-embed>

Vimeo VideoCopied!

Beautiful nature documentary

<scalar-embed
  src="https://vimeo.com/844557780"
  caption="Beautiful nature documentary">
</scalar-embed>

Generic Iframe ContentCopied!

Custom interactive content

<scalar-embed
  src="https://en.wikipedia.org/wiki/Open_source"
  caption="Custom interactive content"
  alt="Interactive demonstration of the API">
</scalar-embed>