vimeo unlisted links

index.html

@@ -141,6 +141,20 @@ <h1>VIMEO!</h1>
           </div>
         </div>
 
+        <div class="example-marquee">
+          <div id="vbg9" data-vbg="https://vimeo.com/304887422/34c51f7a09" data-vbg-play-button="true" data-vbg-mute-button="true" data-vbg-always-play="true" data-vbg-volume="0.15" data-vbg-load-background="true"></div>
+          <div class="content">
+            <div class="inner">
+              <h1>VIMEO UNLISTED!</h1>
+
+              <div data-target="#vbg5" class="seek-bar-wrapper" style="width: calc(100% - 32px); position: absolute; bottom: 16px; left: 16px;">
+                <progress class="seek-bar-progress js-seek-bar-progress" value="0" max="100" aria-hidden="true"></progress>
+                <input type="range" value="0" min="0" max="100" step="any" aria-label="Seek" class="seek-bar js-seek-bar">
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div class="example-marquee">
           <div id="vbg6" data-vbg="https://vimeo.com/1084537" data-vbg-start-at="10" data-vbg-end-at="60" data-vbg-play-button="true" data-vbg-mute-button="true" data-vbg-poster="https://i.imgur.com/9lF2ewQ.png"></div>
           <div class="content">

src/lib/vimeo-background.js

@@ -3,8 +3,10 @@ import { RE_VIMEO } from 'book-of-spells';
 
 export class VimeoBackground extends SuperVideoBackground {
   constructor(elem, params, id, uid, factoryInstance) {
-    super(elem, params, id, uid, 'vimeo', factoryInstance);
+    super(elem, params, id.id, uid, 'vimeo', factoryInstance);
     if (!id) return;
+    this.unlisted = id.unlisted;
+
     if (this.is_mobile && !this.params.mobile) return;
     this.injectScript();
 
@@ -55,8 +57,9 @@ export class VimeoBackground extends SuperVideoBackground {
     return playerElement;
   }
 
-  generateSrcURL(id) {
-    let src = 'https://player.vimeo.com/video/'+id+'?background=1&controls=0';
+  generateSrcURL(id, unlisted) {
+    unlisted = unlisted ? `h=${unlisted}&` : ''
+    let src = `https://player.vimeo.com/video/${id}?${unlisted}background=1&controls=0`;
 
     if (this.params.muted) {
       src += '&muted=1';
@@ -84,7 +87,7 @@ export class VimeoBackground extends SuperVideoBackground {
 
   injectPlayer() {
     this.playerElement = this.generatePlayerElement();
-    this.src = this.generateSrcURL(this.id);
+    this.src = this.generateSrcURL(this.id, this.unlisted);
     this.playerElement.src = this.src;
     this.playerElement.id = this.uid;
 

src/video-backgrounds.js

@@ -106,7 +106,7 @@ export class VideoBackgrounds {
         this.index[uid] = yb;
         break;
       case 'VIMEO':
-        const vm = new VimeoBackground(element, params, vid_data.id, uid, this);
+        const vm = new VimeoBackground(element, params, vid_data, uid, this);
         this.index[uid] = vm;
         break;
       case 'VIDEO':
@@ -153,12 +153,21 @@ export class VideoBackgrounds {
 
       if (pts && pts.length) {
         this.re[k].lastIndex = 0;
-        return {
+        const data = {
           id: pts[1],
           type: k,
           regex_pts: pts,
           link: link
         };
+
+        if (k === 'VIMEO') {
+          const unlistedQueryRegex = /(\?|&)h=([^=&#?]+)/;
+          const unlistedPathRegex = /\/[^\/\:\.]+(\:|\/)([^:?\/]+)\s?$/;
+          const unlistedQuery = link.match(unlistedPathRegex) || link.match(unlistedQueryRegex);
+          if (unlistedQuery) data.unlisted = unlistedQuery[2];
+        }
+
+        return data;
       }
     }