Embeds

Embeds wrap an <iframe> for external content like YouTube, Vimeo, CodePen, and CodeSandbox. URLs from supported platforms are automatically rewritten to their embed form.

Properties

Prop	Type	Default	Description
`src`	`string`	required	URL of the content to embed. YouTube, Vimeo, CodePen, and CodeSandbox URLs are auto-optimized; other URLs are passed straight through.
`caption`	`string`	—	Caption shown below the embed. If omitted, the component's children are used as the caption.
`alt`	`string`	—	Accessible description of the embedded content.

Examples

YouTube Video

Never Gonna Give You Up — Rick Astley

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

<Embed
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  caption="Never Gonna Give You Up — Rick Astley"
/>

Vimeo Video

A short demo on Vimeo

<scalar-embed
  src="https://player.vimeo.com/video/844557780"
  caption="A short demo on Vimeo">
</scalar-embed>

<Embed
  src="https://player.vimeo.com/video/844557780"
  caption="A short demo on Vimeo"
/>

Caption from Children

When caption is omitted, the component's children are rendered as the caption.

Wikipedia page on open source

<scalar-embed src="https://en.wikipedia.org/wiki/Open_source" alt="Wikipedia: Open source">
  Wikipedia page on open source
</scalar-embed>

<Embed src="https://en.wikipedia.org/wiki/Open_source" alt="Wikipedia: Open source">
  Wikipedia page on open source
</Embed>

Math

Code Blocks

The API company.