embedz

Easy, dependency free embeds for Svelte and Vue.

Demo

Installation

# npm
npm install @embedz/svelte

# pnpm
pnpm install @embedz/svelte

# yarn
yarn add @embedz/svelte

Usage

<script>
  import { Dailymotion, Vimeo, YouTube } from "@embedz/svelte";
</script>

<YouTube 
  id="C7eGZUBdL4g" 
  posterquality="max"
/>

Youtube

id

type: string

<YouTube id="C7eGZUBdL4g" />

You can also pass in the full URL for the video

<YouTube id="https://youtu.be/C7eGZUBdL4g" />

poster

type: string

<YouTube
  id="C7eGZUBdL4g"
  poster="https://picsum.photos/1280/720"
/>

posterquality

type: "max" | "high" | "default" | "low"

default: "default"

<YouTube
  id="C7eGZUBdL4g"
  posterquality="low"
/>

params

type: string

<YouTube
  id="C7eGZUBdL4g"
  params="controls=0&mute=1"
/>

ratio

type: string

<YouTube
  id="C7eGZUBdL4g"
  ratio="4:3"
/>

title

type: string

<YouTube
  id="C7eGZUBdL4g"
  title="Rock the House"
/>

Vimeo

id

type: string

<Vimeo id="32001208" />

You can also pass in the full URL for the video

<Vimeo id="https://vimeo.com/32001208" />

poster

type: string

<Vimeo
  id="32001208"
  poster="https://picsum.photos/1280/720"
/>

posterquality

type: "max" | "high" | "default" | "low"

default: "default"

<Vimeo
  id="32001208"
  posterquality="low"
/>

params

type: string

<Vimeo
  id="32001208"
  params="controls=0&mute=1"
/>

ratio

type: string

<Vimeo
  id="32001208"
  ratio="4:3"
/>

title

type: string

<Vimeo
  id="32001208"
  title="Earth"
/>

Dailymotion

id

type: string

<Dailymotion id="x8e31lf" />

You can also pass in the full URL for the video

<Dailymotion id="https://dai.ly/x8e31lf" />

poster

type: string

<Dailymotion 
  id="x8e31lf"
  poster="https://picsum.photos/1280/720"
/>

posterquality

type: "max" | "high" | "default" | "low"

default: "default"

<Dailymotion 
  id="x8e31lf"
  posterquality="low"
/>

params

type: string

<Dailymotion 
  id="x8e31lf"
  params="mute=true&loop=false"
/>

ratio

type: string

<Dailymotion 
  id="x8e31lf"
  ratio="4:3"
/>

title

type: string

<Dailymotion 
  id="x8e31lf"
  title="Dolby Vision"
/>

Development

git clone https://github.com/embedz/embedz.git
cd embedz/packages/svelte
npm install
npm run dev -- --open

License

Licensed under the MIT license.

Contributors

Contributions are welcome! Please feel free to submit a Pull Request.