YouTube component improvements (#102)

.changeset/happy-avocados-relate.md

@@ -0,0 +1,5 @@
+---
+'@astro-community/astro-embed-youtube': minor
+---
+
+Uses the WebP version of YouTube poster images by default for smaller file size.

.changeset/slow-icons-allow.md

@@ -0,0 +1,7 @@
+---
+'@astro-community/astro-embed-youtube': minor
+---
+
+Uses a progressive enhancement pattern to improve YouTube component experience for users with JavaScript disabled
+
+`<YouTube>` now renders its play button as a link to the video. This means if JavaScript is disabled or fails to load, users can still click through to the original video.

packages/astro-embed-youtube/YouTube.astro

@@ -19,20 +19,22 @@ function extractID(idOrUrl: string) {
 }
 
 const videoid = extractID(id);
-const posterURL = poster || `https://i.ytimg.com/vi/${videoid}/hqdefault.jpg`;
-
-// TODO: use the progressive enhancement pattern once https://github.com/paulirish/lite-youtube-embed/issues/124 is released.
+const posterURL =
+	poster || `https://i.ytimg.com/vi_webp/${videoid}/hqdefault.webp`;
+const href = `https://youtube.com/watch?v=${videoid}`;
 ---
 
 <lite-youtube
 	{videoid}
 	{...attrs}
 	style={`background-image: url('${posterURL}');`}
-/>
+>
+	<a {href} class="lty-playbtn">
+		<span class="lyt-visually-hidden">{attrs.playlabel}</span>
+	</a>
+</lite-youtube>
 
-<script>
-	import 'lite-youtube-embed';
-</script>
+<script src="lite-youtube-embed"></script>
 
 <style is:global>
 	lite-youtube > iframe {

tests/astro-embed-twitter.mjs

@@ -1,4 +1,3 @@
-// @ts-check
 import { test } from 'uvu';
 import { renderScreen } from './utils/render.mjs';
 

tests/astro-embed-vimeo.mjs

@@ -1,4 +1,3 @@
-// @ts-check
 import { test } from 'uvu';
 import * as assert from 'uvu/assert';
 import { renderDOM } from './utils/render.mjs';

tests/astro-embed-youtube.mjs

@@ -1,4 +1,3 @@
-// @ts-check
 import { test } from 'uvu';
 import * as assert from 'uvu/assert';
 import { renderDOM } from './utils/render.mjs';
@@ -14,8 +13,14 @@ test('it should render a lite-youtube element', async () => {
 	assert.ok(embed);
 	assert.is(
 		embed.style['background-image'],
-		`url('https://i.ytimg.com/vi/${videoid}/hqdefault.jpg')`
+		`url('https://i.ytimg.com/vi_webp/${videoid}/hqdefault.webp')`
 	);
+	// It renders a static link to the video.
+	const playButton = /** @type {HTMLAnchorElement} */ (
+		embed.querySelector('a.lty-playbtn')
+	);
+	assert.ok(playButton);
+	assert.is(playButton.href, `https://youtube.com/watch?v=${videoid}`);
 });
 
 test('it parses a youtube.com URL', async () => {

tests/utils/render.mjs

@@ -1,4 +1,3 @@
-// @ts-check
 /* eslint-disable no-console */
 import { prettyDOM, queries } from '@testing-library/dom';
 import { getComponentOutput } from 'astro-component-tester';

tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "astro/tsconfigs/strictest"
+  "extends": "astro/tsconfigs/strictest",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true
+  }
 }