From fd77fdb63d5fe8a031f0adfa1a4f5964e6f339ef Mon Sep 17 00:00:00 2001
From: Nick <nick.win999@gmail.com>
Date: Sat, 8 Aug 2020 19:10:10 -0500
Subject: [PATCH] Fix video container size

---
 docs/docs/feature/underglow.md |  4 +++-
 docs/src/css/custom.css        | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs/docs/feature/underglow.md b/docs/docs/feature/underglow.md
index 02aac5d6..780845af 100644
--- a/docs/docs/feature/underglow.md
+++ b/docs/docs/feature/underglow.md
@@ -15,7 +15,9 @@ Of the compatible types, the WS2812 LED family is by far the most popular type.
 
 Here you can see the RGB underglow feature in action using WS2812 LEDs.
 
-<iframe src="//www.youtube.com/embed/2KJkq8ssDU0" frameborder="0" allowfullscreen width="100%"></iframe>
+<figure class="video-container">
+  <iframe src="//www.youtube.com/embed/2KJkq8ssDU0" frameborder="0" allowfullscreen width="100%"></iframe>
+</figure>
 
 ## Enabling RGB Underglow
 
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index f46a5653..d9cddb85 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -23,3 +23,21 @@
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
+
+.video-container {
+  height: 0;
+  margin: 0;
+  margin-bottom: 30px;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  position: relative;
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}