Add posterFormat prop to <YouTube>

.changeset/hot-ligers-cough.md

@@ -0,0 +1,5 @@
+---
+'@astro-community/astro-embed-youtube': minor
+---
+
+Add `posterFormat` prop to `<YouTube>` to allow selecting between `jpg` and `webp` posters

.changeset/six-experts-rush.md

@@ -0,0 +1,5 @@
+---
+'@astro-community/astro-embed-youtube': patch
+---
+
+Use `jpg` as default `posterFormat` for `<YouTube>`

docs/src/content/docs/components/youtube.mdx

@@ -65,6 +65,20 @@ For example, this is the same video as above but with a custom poster image:
 	poster="https://images-assets.nasa.gov/image/0302063/0302063~medium.jpg"
 />
 
+### `posterFormat`
+
+**Type:** `'jpg' | 'webp'`
+**Default:** `'jpg'`
+
+When using the default YouTube poster image, set the `posterFormat` to change the format of the placeholder image.
+This can be used to select the newer `webp` format which typically has a lower file size and removes the black bars.
+
+```astro
+<YouTube id="TtRtkTzHVBU" posterFormat="webp" />
+```
+
+<YouTube id="TtRtkTzHVBU" posterFormat="webp" />
+
 ### `posterQuality`
 
 **Type:** `'max' | 'high' | 'default' | 'low'`  

packages/astro-embed-youtube/YouTube.astro

@@ -5,6 +5,7 @@ import urlMatcher from './matcher';
 export interface Props extends astroHTML.JSX.HTMLAttributes {
 	id: string;
 	poster?: string;
+	posterFormat?: 'jpg' | 'webp';
 	posterQuality?: 'max' | 'high' | 'default' | 'low';
 	params?: string;
 	playlabel?: string;
@@ -13,6 +14,7 @@ export interface Props extends astroHTML.JSX.HTMLAttributes {
 const {
 	id,
 	poster,
+	posterFormat = 'jpg',
 	posterQuality = 'default',
 	title,
 	...attrs
@@ -34,7 +36,11 @@ const posterFile =
 		low: 'default',
 	}[posterQuality] || 'hqdefault';
 const posterURL =
-	poster || `https://i.ytimg.com/vi_webp/${videoid}/${posterFile}.webp`;
+	poster ||
+	{
+		jpg: `https://i.ytimg.com/vi/${videoid}/${posterFile}.jpg`,
+		webp: `https://i.ytimg.com/vi_webp/${videoid}/${posterFile}.webp`,
+	}[posterFormat];
 const href = `https://youtube.com/watch?v=${videoid}`;
 ---
 

tests/astro-embed-youtube.mjs

@@ -13,7 +13,7 @@ test('it should render a lite-youtube element', async () => {
 	assert.ok(embed);
 	assert.is(
 		embed.style['background-image'],
-		`url('https://i.ytimg.com/vi_webp/${videoid}/hqdefault.webp')`
+		`url('https://i.ytimg.com/vi/${videoid}/hqdefault.jpg')`
 	);
 	// It renders a static link to the video.
 	const playButton = /** @type {HTMLAnchorElement} */ (
@@ -82,6 +82,32 @@ test('it can render a lower resolution poster image', async () => {
 	);
 	const embed = window.document.querySelector('lite-youtube');
 	assert.ok(embed);
+	assert.is(
+		embed.style['background-image'],
+		`url('https://i.ytimg.com/vi/${videoid}/default.jpg')`
+	);
+});
+
+test('it can render a webp poster image', async () => {
+	const { window } = await renderDOM(
+		'./packages/astro-embed-youtube/YouTube.astro',
+		{ id: videoid, posterFormat: 'webp' }
+	);
+	const embed = window.document.querySelector('lite-youtube');
+	assert.ok(embed);
+	assert.is(
+		embed.style['background-image'],
+		`url('https://i.ytimg.com/vi_webp/${videoid}/hqdefault.webp')`
+	);
+});
+
+test('it can render a lower resolution webp poster image', async () => {
+	const { window } = await renderDOM(
+		'./packages/astro-embed-youtube/YouTube.astro',
+		{ id: videoid, posterFormat: 'webp', posterQuality: 'low' }
+	);
+	const embed = window.document.querySelector('lite-youtube');
+	assert.ok(embed);
 	assert.is(
 		embed.style['background-image'],
 		`url('https://i.ytimg.com/vi_webp/${videoid}/default.webp')`