Converted to SASS/SCSS

1 files changed, 35 insertions, 0 deletions

diff --git a/src/sass/components/embed.scss b/src/sass/components/embed.scss
new file mode 100644
index 00000000..b5d464f6
--- /dev/null
+++ b/src/sass/components/embed.scss
@@ -0,0 +1,35 @@
+// --------------------------------------------------------------
+// Embedded players
+// YouTube, Vimeo, etc
+// --------------------------------------------------------------
+
+.plyr__video-embed {
+    // Default to 16:9 ratio but this is set by JavaScript based on config
+    $padding: ((100 / 16) * 9);
+    $height: 200;
+    $offset: percentage(($height - $padding) / ($height / 50));
+
+    height: 0;
+    padding-bottom: percentage($padding);
+
+    iframe {
+        border: 0;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        user-select: none;
+        width: 100%;
+    }
+
+    // Vimeo hack
+    > div {
+        padding-bottom: percentage($height);
+        position: relative;
+        transform: translateY(-$offset);
+    }
+}
+// To allow mouse events to be captured if full support
+.plyr--full-ui .plyr__video-embed iframe {
+    pointer-events: none;
+}