vb · vb · Oct 13, 2021 · Oct 13, 2021 · Oct 14, 2021 · Oct 14, 2021
diff --git a/.babelrc b/.babelrc
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # Lazyframe
+
 [![Node.js Package](https://github.com/vb/lazyframe/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/vb/lazyframe/actions/workflows/npm-publish.yml)
 [![npm version](https://badge.fury.io/js/lazyframe.svg)](https://badge.fury.io/js/lazyframe)
 
@@ -40,19 +41,19 @@ $ bower install lazyframe
 JavaScript ES6 imports
 
 ```js
-import lazyframe from "lazyframe";
+import lazyframe from 'lazyframe'
 ```
 
-Include JavaScript in html
+Include JavaScript and css in html
 
 ```html
 <script src="dist/lazyframe.min.js"></script>
 ```
 
-Sass import
+CSS import
 
-```sass
-@import 'src/scss/lazyframe'
+```css
+@import 'src/lazyframe.css';
 ```
 
 Include css in html
@@ -65,15 +66,15 @@ Include css in html
 
 ```js
 // Passing a selector
-lazyframe(".lazyframe");
+lazyframe('.lazyframe')
 
 // Passing a nodelist
-let elements = document.querySelectorAll(".lazyframe");
-lazyframe(elements);
+let elements = document.querySelectorAll('.lazyframe')
+lazyframe(elements)
 
 // Passing a jQuery object
-let elements = $(".lazyframe");
-lazyframe(elements);
+let elements = $('.lazyframe')
+lazyframe(elements)
 ```
 
 ## Options
@@ -84,15 +85,16 @@ General options and corresponding defaults
 
 ```js
 lazyframe(elements, {
-  debounce: 250,
+  debounce: 100,
   lazyload: true,
   autoplay: true,
-
+  youtubeThumbnailQuality: 'hq',
+  youtubeThumbnailImage: 'default',
   // Callbacks
   onLoad: (lazyframe) => console.log(lazyframe),
   onAppend: (iframe) => console.log(iframe),
   onThumbnailLoad: (img) => console.log(img),
-});
+})
 ```
 
 ### `debounce`
@@ -107,6 +109,14 @@ Set this to `false` if you want all API calls and local images to be loaded on p
 
 Set this to `false` to remove autoplay from the `allow` attribute on the iframe tag i.e if set this to `false` if you want don't want your Youtube video to automatically start playing once the user clicks on the play icon.
 
+### youtubeThumbnailQuality
+
+Defines the thumbnail quality to use from Youtubes thumbnail service. Possible values are '', 'sd', 'mq', 'hq' and 'maxres'
+
+### youtubeThumbnailImage
+
+Defines the thumbnail image to use from Youtubes thumbnail service. Possible values are 'default', '1', '2' and '3'
+
 ### `onLoad`
 
 Callback function for when a element is initialized.
@@ -130,7 +140,8 @@ Callback function with the thumbnail URL
   data-src=""
   data-ratio="1:1"
   data-initinview="false"
-  data-autoplay="false"
+  data-youtube-thumbnail-image="default"
+  data-youtube-thumbnail-quality="hq"
 ></div>
 ```
 
@@ -158,6 +169,14 @@ The ratio of the lazyframe. Possible values: 16:9, 4:3, 1:1
 
 Set this to true if you want the resource to execute (for example video to play) when the element is in view.
 
+### data-youtube-thumbnail-image
+
+Defines the thumbnail image to use from Youtubes thumbnail service. Possible values are 'default', '1', '2' and '3'.
+
+### data-youtube-thumbnail-quality
+
+Defines the thumbnail quality to use from Youtubes thumbnail service. Possible values are '', 'sd', 'mq', 'hq' and 'maxres'
+
 ## License
 
 [MIT](https://opensource.org/licenses/MIT). © 2016 Viktor Bergehall
diff --git a/index.html b/index.html
@@ -53,20 +53,20 @@
 <body>
   <div class="container">
     <p>Youtube video with thumbnail and title from API</p>
-    <div class="lazyframe" data-src="https://www.youtube.com/embed/ara1uUvajoU" data-vendor="youtube">
+    <div class="lazyframe" data-src="https://www.youtube.com/embed/ara1uUvajoU?rel=0">
     </div>
 
     <p>Youtube video with custom thumbnail and title</p>
-    <div class="lazyframe" data-src="https://www.youtube.com/embed/ara1uUvajoU" data-vendor="youtube"
-      data-title="Custom title" data-thumbnail="https://placekitten.com/500/281">
+    <div class="lazyframe" data-src="https://www.youtube.com/embed/ara1uUvajoU" data-title="Custom title"
+      data-thumbnail="https://placekitten.com/500/281">
     </div>
 
     <p>Vimeo video with thumbnail and title from API</p>
-    <div class="lazyframe" data-src="https://vimeo.com/45915667" data-vendor="vimeo">
+    <div class="lazyframe" data-src="https://vimeo.com/45915667">
     </div>
 
     <p>Vimeo video with custom thumbnail and title</p>
-    <div class="lazyframe" data-src="https://vimeo.com/183524061" data-vendor="vimeo" data-title="Custom title"
+    <div class="lazyframe" data-src="https://vimeo.com/183524061" data-title="Custom title"
       data-thumbnail="https://placekitten.com/500/281">
     </div>
 
@@ -78,13 +78,14 @@
 
     <p>Google maps iframe with custom thumbnail and title that gets executed when in view</p>
     <div class="lazyframe lazyframe--custom"
-      data-src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ8fA1bTmyXEYRYm-tjaLruCI&key=AIzaSyDQxRfx3HQrE0_oTFI2WHzoiGL_CM0JJfQ"
+      data-src="https://www.surveymonkey.com/r/?sm=%2bd%2bdWobuoz7irMV%2fpzKPcJmrKosuGWSraJtIrFQ4wBQ%3d"
       data-title="Something completely different" data-initinview="true">
     </div>
   </div>
-  <script src="https://cdn.jsdelivr.net/npm/lazyframe/dist/lazyframe.min.js"></script>
+  <script src="./dist/lazyframe.min.js"></script>
   <script>
-    lazyframe('.lazyframe');
+    const nodes = document.querySelectorAll('.lazyframe');
+    lazyframe(nodes);
   </script>
 </body>