Embeds
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#
https://www.youtube.com/embed/dQw4w9WgXcQ
<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#
https://player.vimeo.com/video/844557780
<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.
https://en.wikipedia.org/wiki/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>