astro-embeds-youtube

Component for embedding YouTube videos in Astro projects.

Install

pnpm i astro-embeds-youtube

Usage

<YouTube id={video_id} />

The YouTube component generates an embed using the lite-youtube-embed custom element. YouTube embeds will always require some JavaScript, but this is one of the most minimal and performant ways to embed a YouTube video.

---
import { YouTube } from 'astro-embeds-youtube';
---

<YouTube id="xtTy5nKay_Y" />

You can also pass in a URL in one of the various YouTube formats.

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

Optional props

poster

You can provide an alternative poster image by passing in a URL to the poster prop.

<YouTube
  id="xtTy5nKay_Y"
  poster="https://images-assets.nasa.gov/image/0302063/0302063~orig.jpg"
/>

params

As when using lite-youtube-embed directly, you can pass in a params prop to set the YouTube player parameters. This looks like a series of URL search params.

<YouTube id="xtTy5nKay_Y" params="start=10&end=30" />

playlabel

By default, the play button in the embed has an accessible label set to “Play”. If you want to customise this, you can set the playlabel prop.

<YouTube id="xtTy5nKay_Y" playlabel="Play the video" />