SvelteKit Embed

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

Each component is wrapped in an intersection observer GeneralObserver which will load up the component when it scrolls into the viewport.

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:

SimpleCast

Props:

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

Usage:

<SimpleCast episodeId="46aaf483-8567-451a-aa7c-4c92fbb13f28" />

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:

Props:

tweetLink: string = ''

Usage:

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

Output:

Loading Tweet...

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: