Migrate custom properties from media to parent

2 files changed, 23 insertions, 0 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 9b18bc35..14050929 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -269,6 +269,9 @@ class Plyr {
       wrap(this.media, this.elements.container);
     }
 
+    // Migrate custom properties from media to container (so they work 😉)
+    ui.migrateStyles.call(this);
+
     // Add style hook
     ui.addStyleHook.call(this);
 
diff --git a/src/js/ui.js b/src/js/ui.js
index c7553c72..c9ad7d90 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -264,6 +264,26 @@ const ui = {
       );
     }
   },
+
+  // Migrate any custom properties from the media to the parent
+  migrateStyles() {
+    // Loop through values (as they are the keys when the object is spread 🤔)
+    Object.values({ ...this.media.style })
+      // We're only fussed about Plyr specific properties
+      .filter(key => key.startsWith('--plyr'))
+      .forEach(key => {
+        // Set on the container
+        this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
+
+        // Clean up from media element
+        this.media.style.removeProperty(key);
+      });
+
+    // Remove attribute if empty
+    if (is.empty(this.media.style)) {
+      this.media.removeAttribute('style');
+    }
+  },
 };
 
 export default ui;