Youtube Video

---
interface Props {
	id: string;
	controls?: boolean;
	start?: number;
	end?: number;
	modestBranding?: boolean;
	autoplay?: boolean;
}

const {
	id,
	controls = true,
	start = 0,
	end = null,
	modestBranding = 2,
	autoplay = true,
} = Astro.props;

const params = {
	controls,
	start,
	end: end || '',
	modestbranding: modestBranding,
	autoplay,
};
---

<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.2.0/lite-yt-embed.css"
/>

<div class="rounded-sm overflow-hidden">
	<lite-youtube videoId={id} params={new URLSearchParams(params).toString()}
	></lite-youtube>
</div>

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.2.0/lite-yt-embed.js"
></script>

This is a component. Copy the code to components/YoutubeVideo.astro. This component doesn’t provide much styling, it’s just a simple wrapper for Lite Youtube Embed.

Usage

Import the component where you need, and you can use it like this:

---
import YoutubeVideo from '@components/YoutubeVideo.astro';
---
<YoutubeVideo id="dQw4w9WgXcQ" />

Youtube Options

This component also supports the parameters that you can pass to a Youtube embed:

• autoplay: Automatically start playing the video (True by default, because of how Lite Youtube Embed works.)
• controls: Show or hide the video controls
• start: Start the video at a specific time (in ms)
• end: End the video at a specific time (in ms)
• modestBranding: Show or hide the Youtube logo

---
import YoutubeVideo from '@components/YoutubeVideo.astro';
---
<YoutubeVideo id="dQw4w9WgXcQ" controls start={10} end={30} modestBranding />