From d046489ab3706bc060a422a0402982b3174cdd67 Mon Sep 17 00:00:00 2001
From: Konstantin Devyatov <k.devyatov@fbs.com>
Date: Fri, 13 Aug 2021 13:01:53 +0300
Subject: [PATCH] added thumbnail quality attribute, default to hq

---
 index.html       | 5 +++++
 src/lazyframe.js | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index cb6279d..ba7eef3 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,11 @@
       data-title="Custom title" data-thumbnail="https://placekitten.com/500/281">
     </div>
 
+    <p>Youtube video with custom thumbnail quality</p>
+    <div class="lazyframe" data-src="https://www.youtube.com/embed/ara1uUvajoU" data-vendor="youtube"
+      data-thumbnailquality="maxres">
+    </div>
+
     <p>Vimeo video with thumbnail and title from API</p>
     <div class="lazyframe" data-src="https://vimeo.com/45915667" data-vendor="vimeo">
     </div>
diff --git a/src/lazyframe.js b/src/lazyframe.js
index 21a9ee1..2dadc89 100644
--- a/src/lazyframe.js
+++ b/src/lazyframe.js
@@ -11,6 +11,7 @@ const Lazyframe = () => {
     id: undefined,
     src: undefined,
     thumbnail: undefined,
+    thumbnailquality: 'hq',
     title: undefined,
     initialized: false,
     y: undefined,
@@ -155,7 +156,10 @@ const Lazyframe = () => {
           _l.settings.title = constants.response.title(response);
         }
         if (!_l.settings.thumbnail) {
-          const url = constants.response.thumbnail(response);
+          let url = constants.response.thumbnail(response);
+          if (_l.settings.thumbnailquality !== 'hq') {
+            url = url.replace('/hqdefault.jpg', `/${_l.settings.thumbnailquality}default.jpg`);
+          }
           _l.settings.thumbnail = url;
           lazyframe.settings.onThumbnailLoad.call(this, url);
         }
@@ -297,7 +301,7 @@ const Lazyframe = () => {
     iframeNode.setAttribute('src', settings.src);
     iframeNode.setAttribute('frameborder', 0);
     iframeNode.setAttribute('allowfullscreen', '');
-    
+
     if (settings.autoplay) {
       iframeNode.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
     }