@barcia/astro-youtube

Astro YouTube Component

A YouTube component for Astro with type safety and support for YouTube Player Parameters. Is a wrapper of lite-youtube-embed with some improvements.

• Type safety.
• Lightweight and minimalistic.
• Can be used with url or id of the YouTube video.
• Support for custom title.
• Support for official YouTube Player Parameters with type safety.
• By default, uses the best available cover resolution.
• By default, sets equal borders radius of official YouTube website (can be disabled).
• Set aspect ratio to 16/9 by default.
• Wrapper of lite-youtube-embed.
  • approximately 224x faster
  • lite-youtube uses youtube-nocookie.com instead of youtube.com in order to be more privacy friendly

Usage

Import the component and use with the url prop or the id prop:

import YouTube from "@barcia/astro-youtube";

<YouTube url="https://www.youtube.com/watch?v=QdBZY2fkU-0" />

<!-- or -->

<YouTube id="QdBZY2fkU-0" />

Add the title prop to set the title of the video.

<YouTube url="https://www.youtube.com/watch?v=QdBZY2fkU-0" title="GTA 6 Trailer" />

Add any YouTube Player Parameters to the component, listed here and with type safety.

<YouTube url="https://www.youtube.com/watch?v=QdBZY2fkU-0" autoplay="1" />

Props

Component related

Prop name	Description
url	The URL of the YouTube video.
id	The ID of the YouTube video.
title	Optional title of the YouTube video.
borderRadius	Set false to remove the official YouTube player border radius. By default, is true.

YouTube Player Parameters

See the Official YouTube Player Parameters for check all available parameters.

Acknowledgments

• lite-youtube-embed by Paul Irish
• eleventy-plugin-youtube-embed

Author

• https://barcia.dev
• https://github.com/barcia
• https://bsky.app/profile/barcia.dev

License

MIT License.