Added support for various URL's

andrewvasilchuk · Jan 3, 2020 · c22b455 · c22b455
1 parent 93858be
commit c22b455
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -136,7 +136,7 @@ The list of available `props` (with their types, default values and descriptions
 
 | Property           | Required | Type                           | Default           | Description                                                                                                                                                                                                                                    |
 | ------------------ | -------- | ------------------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `url`              | `true`   | `string`                       |                   | Video `URL` in `https://www.youtube.com/watch?v=[VIDEO_ID]` format                                                                                                                                                                             |
+| `url`              | `true`   | `string`                       |                   | Video URL. Supported URLs are listed [here](https://gist.github.com/rodrigoborgesdeoliveira/987683cfbfcc8d800192da1e73adc486).                                                                                                                                                                             |
 | `query`            | `false`  | `string`                       | `?autoplay=1`     | [Query string](https://en.wikipedia.org/wiki/Query_string) which will be appended to the generated embed URL                                                                                                                                   |
 | `alt`              | `false`  | `string`                       | `Video thumbnail` | Value of the `alt` attribute of the thumbnail `<img />` element                                                                                                                                                                                |
 | `buttonLabel`      | `false`  | `string`                       | `Play video`      | Value of the `aria-label` attribute of the play `<button></button>` element. Improves a11y.                                                                                                                                                    |

diff --git a/src/VueLazyYoutubeVideo.vue b/src/VueLazyYoutubeVideo.vue
@@ -59,13 +59,6 @@ export default Vue.extend({
     url: {
       type: String,
       required: true,
-      validator: value => {
-        if (typeof value === 'string') {
-          return value.startsWith('https://www.youtube.com/watch?v=')
-        } else {
-          return false
-        }
-      },
     },
     query: {
       type: String,
@@ -122,7 +115,7 @@ export default Vue.extend({
   },
   computed: {
     id(): string {
-      const regExp = /^https:\/\/www\.youtube\.com\/watch\?v=(.+)$/
+      const regExp = /(?:https?:\/\/(?:www\.)?)?(?:youtube(?:-nocookie)?\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]vi?=)|youtu\.be\/)([^"&?\/ ]{11}).*/
       const executionResult = regExp.exec(this.url)
       if (executionResult !== null) {
         return executionResult[1]