From 2150c44036e13073c6f7f07343009b6373846bdf Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Tue, 6 Feb 2018 00:24:48 +1100
Subject: Added backwards compatibility for <div> embeds

---
 src/js/defaults.js        |  8 +++++
 src/js/plugins/vimeo.js   | 11 ++++++-
 src/js/plugins/youtube.js | 10 +++++-
 src/js/plyr.js            | 77 ++++++++++++++++++++++++-----------------------
 4 files changed, 67 insertions(+), 39 deletions(-)

(limited to 'src')

diff --git a/src/js/defaults.js b/src/js/defaults.js
index 20db0b9c..9f9b96b0 100644
--- a/src/js/defaults.js
+++ b/src/js/defaults.js
@@ -358,6 +358,14 @@ const defaults = {
         tabFocus: 'plyr__tab-focus',
     },
 
+    // Embed attributes
+    attributes: {
+        embed: {
+            provider: 'data-plyr-provider',
+            id: 'data-plyr-embed-id',
+        },
+    },
+
     // API keys
     keys: {
         google: null,
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 48d46037..4b604337 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -51,7 +51,16 @@ const vimeo = {
             gesture: 'media',
         };
         const params = utils.buildUrlParams(options);
-        const id = utils.parseVimeoId(player.media.getAttribute('src'));
+
+        // Get the source URL or ID
+        let source = player.media.getAttribute('src');
+
+        // Get from <div> if needed
+        if (utils.is.empty(source)) {
+            source = player.media.getAttribute(this.config.attributes.embed.id);
+        }
+
+        const id = utils.parseVimeoId(source);
 
         // Build an iframe
         const iframe = utils.createElement('iframe');
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 6b4a54bd..d66b98b7 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -87,8 +87,16 @@ const youtube = {
             return;
         }
 
+        // Get the source URL or ID
+        let source = player.media.getAttribute('src');
+
+        // Get from <div> if needed
+        if (utils.is.empty(source)) {
+            source = player.media.getAttribute(this.config.attributes.embed.id);
+        }
+
         // Replace the <iframe> with a <div> due to YouTube API issues
-        const videoId = utils.parseYouTubeId(player.media.getAttribute('src'));
+        const videoId = utils.parseYouTubeId(source);
         const id = utils.generateId(player.provider);
         const container = utils.createElement('div', { id });
         player.media = utils.replaceElement(container, player.media);
diff --git a/src/js/plyr.js b/src/js/plyr.js
index f64c15ae..bf10431a 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,4 +1,4 @@
-// ==========================================================================
+// ==========================================================================
 // Plyr
 // plyr.js v3.0.0-beta.11
 // https://github.com/sampotts/plyr
@@ -153,50 +153,53 @@ class Plyr {
                 // Find the frame
                 iframe = this.media.querySelector('iframe');
 
-                // <iframe> required
-                if (!utils.is.element(iframe)) {
-                    this.debug.error('Setup failed: <iframe> is missing');
-                    return;
-                }
-
-                // Audio will come later for external providers
-                this.type = types.video;
-
-                // Detect provider
-                url = iframe.getAttribute('src');
-                this.provider = utils.getProviderByUrl(url);
-
-                // Get attributes from URL and set config
-                params = utils.getUrlParams(url);
-                if (!utils.is.empty(params)) {
-                    const truthy = [
-                        '1',
-                        'true',
-                    ];
-
-                    if (truthy.includes(params.autoplay)) {
-                        this.config.autoplay = true;
-                    }
-                    if (truthy.includes(params.playsinline)) {
-                        this.config.inline = true;
-                    }
-                    if (truthy.includes(params.loop)) {
-                        this.config.loop.active = true;
+                // <iframe> type
+                if (utils.is.element(iframe)) {
+                    // Detect provider
+                    url = iframe.getAttribute('src');
+                    this.provider = utils.getProviderByUrl(url);
+
+                    // Rework elements
+                    this.elements.container = this.media;
+                    this.media = iframe;
+
+                    // Reset classname
+                    this.elements.container.className = '';
+
+                    // Get attributes from URL and set config
+                    params = utils.getUrlParams(url);
+                    if (!utils.is.empty(params)) {
+                        const truthy = [
+                            '1',
+                            'true',
+                        ];
+
+                        if (truthy.includes(params.autoplay)) {
+                            this.config.autoplay = true;
+                        }
+                        if (truthy.includes(params.playsinline)) {
+                            this.config.inline = true;
+                        }
+                        if (truthy.includes(params.loop)) {
+                            this.config.loop.active = true;
+                        }
                     }
+                } else {
+                    // <div> with attributes
+                    this.provider = this.media.getAttribute(this.config.attributes.embed.provider);
+
+                    // Remove attribute
+                    this.media.removeAttribute(this.config.attributes.embed.provider);
                 }
 
-                // Unsupported provider
+                // Unsupported or missing provider
                 if (utils.is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) {
                     this.debug.error('Setup failed: Invalid provider');
                     return;
                 }
 
-                // Rework elements
-                this.elements.container = this.media;
-                this.media = iframe;
-
-                // Reset classname
-                this.elements.container.className = '';
+                // Audio will come later for external providers
+                this.type = types.video;
 
                 break;
 
-- 
cgit v1.2.3