feat: add poster quality attr (#36)

README.md

@@ -42,7 +42,7 @@ import '@justinribeiro/lite-youtube';
 If you want the paste-and-go version, you can simply load it via CDN:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/[email protected]/lite-youtube.js">
+<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/[email protected]/lite-youtube.js"></script>
 ```
 
 ## Basic Usage
@@ -122,5 +122,6 @@ flexibility.
 | `videotitle`   | The title of the video                                           | `Video` |
 | `videoplay`    | The title of the play button (for translation)                   | `Play`  |
 | `videoStartAt` | Set the point at which the video should start, in seconds        | `0`     |
+| `posterquality`| Set thumbnail poster quality (maxresdefault, sddefault, mqdefault, hqdefault) | `hqdefault`  |
 | `autoload`     | Use Intersection Observer to load iframe when scrolled into view | `false` |
 | `params`       | Set YouTube query parameters                                     | ``      |

demo/index.html

@@ -107,5 +107,14 @@ <h3>YouTube QueryParams</h3>
       videoid="guJLfqTFfIw"
       params="controls=0&enablejsapi=1"
     ></lite-youtube>
+
+    <pre>
+
+&lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot; posterquality=&quot;maxresdefault&gt;&lt;/lite-youtube&gt;
+    </pre>
+    <lite-youtube
+      videoid="guJLfqTFfIw"
+      posterquality="maxresdefault"
+    ></lite-youtube>
   </body>
 </html>

lite-youtube.ts

@@ -86,6 +86,14 @@ export class LiteYTEmbed extends HTMLElement {
     }
   }
 
+  get posterQuality(): string {
+    return this.getAttribute('posterquality') || 'hqdefault';
+  }
+
+  set posterQuality(quality: string) {
+    this.setAttribute('posterquality', quality);
+  }
+
   get params(): string {
     return `start=${this.videoStartAt}&${this.getAttribute('params')}`;
   }
@@ -271,8 +279,8 @@ export class LiteYTEmbed extends HTMLElement {
     // we don't know which image type to preload, so warm the connection
     LiteYTEmbed.addPrefetch('preconnect', 'https://i.ytimg.com/');
 
-    const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/hqdefault.webp`;
-    const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
+    const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
+    const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;
     this.domRefImg.webp.srcset = posterUrlWebp;
     this.domRefImg.jpeg.srcset = posterUrlJpeg;
     this.domRefImg.fallback.src = posterUrlJpeg;