Merge pull request #3 from ggmanuilov/master

Added ability to specify image size.
andrewvasilchuk · Sep 2, 2019 · 3910374 · 3910374
2 parents 1118008 + ef946b9
commit 3910374
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -67,6 +67,7 @@ export default {
 | alt         | `false`  | String | `"Video alternative image"` | Alternative text of the preview image                                                 |
 | buttonLabel | `false`  | String | `"Play video"`              | `aria-label` attribute value of the play button. It improves a11y.                    |
 | aspectRatio | `false`  | String | `"16:9"`                    | Aspect ratio. It helps to save proportions of the video on different container sizes. |
+| size        | `false`  | String | `"hqdefault"`               | Video size. Available variants 'mqdefault', 'sddefault', 'hqdefault', 'maxresdefault'.|
 
 ## ⚙️ Events
 

diff --git a/dist/vue-lazy-youtube-video.js b/dist/vue-lazy-youtube-video.js
diff --git a/src/VueLazyYoutubeVideo.vue b/src/VueLazyYoutubeVideo.vue
@@ -4,12 +4,12 @@
       <template v-if="!isVideoLoaded">
         <picture>
           <source
-            :srcset="`https://i.ytimg.com/vi_webp/${id}/hqdefault.webp`"
+            :srcset="`https://i.ytimg.com/vi_webp/${id}/${size}.webp`"
             type="image/webp"
           >
           <img
             class="y-video__media"
-            :src="`https://i.ytimg.com/vi/${id}/hqdefault.jpg`"
+            :src="`https://i.ytimg.com/vi/${id}/${size}.jpg`"
             :alt="alt"
           >
         </picture>
@@ -54,6 +54,18 @@ export default {
         const pattern = /^\d+:\d+$/;
         return pattern.test(value);
       }
+    },
+    size: {
+      type: String,
+      default: "hqdefault",
+      validator: value =>
+        [
+          "default",
+          "mqdefault",
+          "sddefault",
+          "hqdefault",
+          "maxresdefault"
+        ].indexOf(value) !== -1
     }
   },
   data() {