Thumbnail changes:

Added
- Added a `thumbnail` prop to allow the alternate 1/2/3 thumbnails to be used

Changed
- Use i.ytimg.com instead of img.youtube.com, as per YouTube and its API
- Allow the mq/hq/sd abbreviations YouTube uses to be passed for thumbnailRes

Author: insin

README.md

@@ -10,6 +10,20 @@ npm i astro-lazy-youtube-embed
 
 ## Usage
 
+### Thumbnails
+
+Use `thumbnailRes` to control the resolution of the thumbnail used for the placeholder - you can pass the resolution (120, 320, 480, 640, or 1280), or one of the names YouTube maps resolutions to (default, medium/mq, high/hq, standard/sd, or maxres).
+
+> [!CAUTION]
+> Not all videos will have higher resolution thumbnails available, especially older videos - check if the thumbnail is available when using higher resolutions.
+
+Use `thumbnail` (1, 2, or 3) to use one of the 3 alternate thumbnails YouTube provides as the placeholder - these are screenshots from the video itself.
+
+> [!NOTE]
+> Some older videos will have higher resolution thumbnails available for their alternate thumbnails than for the default thumbnail.
+
+### Player parameters
+
 Use `embedParams` to pass [YouTube IFrame Player API parameters](https://developers.google.com/youtube/player_parameters#Parameters) for the embed, e.g. to set start & stop times to play a particular section when clicked.
 
 Default `embedParams` are:
@@ -21,7 +35,7 @@ Default `embedParams` are:
 }
 ```
 
-Use `thumbnailRes` to control the resolution of the thumbnail used for the placeholder.
+### Example
 
 ```astro
 ---

YouTube.astro

@@ -1,6 +1,7 @@
 ---
 interface Props extends astroHTML.JSX.IframeHTMLAttributes {
   embedParams?: EmbedParams
+  thumbnail?: Thumbnail
   thumbnailRes?: ThumbnailRes
   title: string
   videoId: string
@@ -33,32 +34,38 @@ interface EmbedParams {
 
 type ToggleParam = 0 | '0' | 1 | '1'
 
-type ThumbnailRes = 120 | '120' | 'default' | 320 | '320' | 'medium' | 480 | '480' | 'high' | 640 | '640' | 'standard' | 1280 | '1280' | 'maxres'
+type Thumbnail = 'default' | 1 | '1' | 2 | '2' | 3 | '3'
+
+type ThumbnailRes = 120 | '120' | 'default' | 320 | '320' | 'medium' | 'mq' | 480 | '480' | 'high' | 'hq' | 640 | '640' | 'standard' | 'sd' | 1280 | '1280' | 'maxres'
 
 const QUALITY_PREFIXES = {
   120: '',
   default: '',
   320: 'mq',
   medium: 'mq',
+  mq: 'mq',
   480: 'hq',
   high: 'hq',
+  hq: 'hq',
   640: 'sd',
   standard: 'sd',
+  sd: 'sd',
   1280: 'maxres',
   maxres: 'maxres',
 }
 
 let {
   embedParams,
-  thumbnailRes = 'standard',
+  thumbnail = 'default',
+  thumbnailRes = 'sd',
   title,
   videoId,
   ...attrs
 } = Astro.props as Props
 
 let params: EmbedParams = {autoplay: 1, ...embedParams}
 
-let thumbnailUrl = `https://img.youtube.com/vi/${videoId}/${QUALITY_PREFIXES[thumbnailRes]}default.jpg`
+let thumbnailUrl = `https://i.ytimg.com/vi/${videoId}/${QUALITY_PREFIXES[thumbnailRes]}${thumbnail}.jpg`
 let embedQuery = Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
 let embedUrl = `https://www.youtube.com/embed${videoId ? `/${videoId}` : ''}${embedQuery ? `?${embedQuery}` : ''}`
 let playButtonSvg = `<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>`