From 1c62f306246dcec825527b2f01002587996596f5 Mon Sep 17 00:00:00 2001
From: Andreas Siegrist <andreas.siegrist@gmail.com>
Date: Thu, 14 Jul 2022 15:10:36 +0200
Subject: [PATCH] fix: allow unlisted vimeo video urls when loading using data
 attributes (#2504)

---
 README.md               |  2 ++
 src/js/plugins/vimeo.js | 18 +++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 8d00a963f..1b79c019a 100644
--- a/README.md
+++ b/README.md
@@ -113,6 +113,8 @@ Or the `<div>` non progressively enhanced method:
 <div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>
 ```
 
+_Note_: The `data-plyr-embed-id` can either be the video ID or URL for the media.
+
 ## JavaScript
 
 You can use Plyr as an ES6 module as follows:
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 812381059..46845f4cf 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -24,8 +24,10 @@ function parseId(url) {
     return url;
   }
 
-  const regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
-  return url.match(regex) ? RegExp.$2 : url;
+  const regex = /^(.*vimeo.com\/|.*video\/)?(\d+).*/;
+  const found = url.match(regex);
+
+  return !found ? url : found[found.length - 1];
 }
 
 // Try to extract a hash for private videos from the URL
@@ -35,12 +37,13 @@ function parseHash(url) {
    *  - [https://player.]vimeo.com/video/{id}?h={hash}[&params]
    *  - [https://player.]vimeo.com/video/{id}?[params]&h={hash}
    *  - video/{id}/{hash}
-   * If matched, the hash is available in capture group 4
+   *  - {id}/{hash}
+   * If matched, the hash is available in the captured group
    */
-  const regex = /^.*(vimeo.com\/|video\/)(\d+)(\?.*&*h=|\/)+([\d,a-f]+)/;
+  const regex = /^(.*vimeo.com\/|.*video\/)?(\d+)(\?.*&*h=|\/)+([\d,a-f]+)/;
   const found = url.match(regex);
 
-  return found && found.length === 5 ? found[4] : null;
+  return !found ? url : found[found.length - 1];
 }
 
 // Set playback state and trigger change (only on actual change)
@@ -94,6 +97,11 @@ const vimeo = {
       source = player.media.getAttribute(player.config.attributes.embed.id);
       // hash can also be set as attribute on the <div>
       hash = player.media.getAttribute(player.config.attributes.embed.hash);
+      // In case hash is not explicitly set as attribute we try to parse it from the id attribute
+      if (!hash) {
+        hash = parseHash(source);
+        alert(hash);
+      }
     } else {
       hash = parseHash(source);
     }