SvelteKit Embed

This is a collection of embed components I use on a regular basis packaged up for use.

Each component (except Tweet and Toot) is wrapped in an intersection observer GeneralObserver which will load up the component when it scrolls into the viewport.

Install it

pnpm i -D sveltekit-embed # npm or yarn even

Use it

<!-- +page.svelte -->
<script>
	import { AnchorFm } from 'sveltekit-embed'
</script>

<AnchorFm
	episodeUrl="purrfect-dev/embed/episodes/1-31---Delivering-Digital-Content-with-GraphCMS-e14g55c/a-a650v9a"
/>

Available Components List

Your embed not here? Start a discussion or open a PR.

• AnchorFm
• Buzzsprout
• CodePen
• Deezer
• GenericEmbed
• Gist
• Guild
• Relive
• SimpleCast
• Slides
• SoundCloud
• Spotify
• StackBlitz
• Toot
• Tweet
• Vimeo
• YouTube
• Zencastr

AnchorFm

Props:

episodeUrl: string
height: string = '100'
width: string = '100'

Usage:

<AnchorFm
	episodeUrl="purrfect-dev/embed/episodes/1-31---Delivering-Digital-Content-with-GraphCMS-e14g55c/a-a650v9a"
/>

Output:

Buzzsprout

Props:

buzzsproutId: string
height: string = '100'
width: string = '200'

Usage:

<Buzzsprout
	buzzsproutId="190346/9866589-185-scott-spence-from-vba-analyst-to-webdev"
/>

Output:

CodePen

Props:

width: string = '100'
height: string = '500'
codePenId: string = ''
tabs:
  | string[]
  | 'js'
  | 'css'
  | 'scss'
  | 'less'
  | 'result' = 'result'
clickToLoad: boolean = true
editable: boolean = true
theme: string | 'light' | 'dark' | 'default' = 'default'

Usage:

For a CodePen URL like this: https://codepen.io/spences10/pen/WNMvXpa take the codePenId this WNMvXpa and add it to the component.

<CodePen codePenId="WNMvXpa" />

Output:

Deezer

Props:

theme: string = 'auto'
frameSrc: string = ''
height: string = '300px'
width: string = '100%'

Usage:

<Deezer frameSrc="show/496882" />

Output:

GenericEmbed

This component passes all provided props to the iframe This component also provides a slot, to bring your own markup besides the iframe

Props:

src: string = ''
title: string = ''
height: string = '300'
width: string = '100%'

Usage:

width: string = '100%'
height: string = '180px'
data-testid: string = 'spotify'
title: string = 'spotify-generic'
src: string = 'https://open.spotify.com/embed/show/4XPl3uEEL9hvqMkoZrzbx5'
frameBorder: string = '0'
allow: string = 'encrypted-media'

<GenericEmbed
  width="100%"
  height="180px"
  data-testid="spotify"
  title="spotify-generic"
  src={`https://open.spotify.com/embed/show/4XPl3uEEL9hvqMkoZrzbx5`}
  frameBorder="0"
  allow="encrypted-media"
/>

Output:

Gist

Props:

gistUri: string = ''

Usage:

<Gist gistUri="Ennoriel/8c89dc3615292f0a40b04f4f876afd77" />

Output:

Guild

Props:

height: string = '350'
width: string = '100'
card_id: string
type: 'guild' | 'user' | 'event' | 'presentation' =
  'guild'
display_type:
  | 'card'
  | 'item'
  | 'events/latest'
  | 'events/upcoming'
  | 'events/past'
  | 'presentations/latest'
  | 'presentations/upcoming'
  | 'presentations/other' = 'card'

Usage:

<Guild
	type="guild"
	card_id="svelte-society-london"
	display_type="events/latest"
/>

Output:

Relive

Props:

reliveId: string = ''
width: string = '100%'

Usage:

<Relive reliveId="vAOZokmYVo6" />

Output:

SimpleCast

Props:

episodeId: string = ''
theme: string = `dark`

Usage:

<SimpleCast episodeId="1c254f66-5d75-48ef-b960-4cfec94baa0b" />

Output:

Slides

Props:

width: string = '576'
height: string = '420'
username: string = ''
title: string = ''
byline: 'hidden' | 'visible' | 'default' = 'hidden'
share: 'hidden' | 'visible' | 'default' = 'hidden'
style: | 'light'
    | 'dark'
    | 'hidden'
    | 'transparent'
    | 'default' = 'dark'

Usage:

<Slides
	username="spences10"
	title="building-with-sveltekit-and-graphql"
/>

Output:

SoundCloud

Props:

soundcloudLink: string = ''
height: string = '300'
width: string = '100%'
showVisual: boolean = true

Usage:

<SoundCloud
	soundcloudLink="https://soundcloud.com/dimension_uk/sets/prospa-want-need-love"
/>

Output:

Spotify

Props:

spotifyLink: string = ''
height: string = '320'
width: string = '380'

Usage:

<Spotify
	spotifyLink="show/4XPl3uEEL9hvqMkoZrzbx5"
	width="100%"
	height="180px"
/>

Output:

StackBlitz

Props:

width: string = '100'
height: string = '500'
id: string = ''
view: 'editor' | 'preview' | 'default' = 'default'
clickToLoad: boolean = true
hideNavigation: boolean = false
hideExplorer: boolean = true
theme: string | 'light' | 'dark' | 'default' = 'dark'
file: string | undefined

Usage:

<StackBlitz id="vitejs-vite-yyoood" theme="light" />

Output:

Toot

Props:

instance: string = ''
username: string = ''
tootId: string = ''

Usage:

<Toot
	instance="mas.to"
	username="@spences10"
	tootId="109252587760962553"
/>

Output:

Tweet

Props:

tweetLink: string = ''

Usage:

<Tweet tweetLink="adamwathan/status/959078631434731521" />

Output:

Vimeo

Props:

vimeoId: string = ''
autoPlay: boolean = false
aspectRatio: string = '16:9'
skipTo: { h: 0, m: 0, s: 0 }

Usage:

<Vimeo vimeoId="246846978" />

Output:

YouTube

Props:

height: string = '560'
width: string = '315'
youTubeId: string = ''
listId: string = ''
autoPlay: boolean = false
aspectRatio: string = '16:9'
skipTo: { h: 0, m: 0, s: 0 }

Usage:

<YouTube youTubeId="L7_z8rcbFPg" />

Output:

Zencastr

Props:

zencastrId: string = ''

Usage:

<Zencastr zencastrId="TARGseQu" />

Output: