diff options
| author | Nick <nick.win999@gmail.com> | 2020-08-08 19:10:10 -0500 |
|---|---|---|
| committer | Nick <nick.win999@gmail.com> | 2020-08-08 19:10:10 -0500 |
| commit | fd77fdb63d5fe8a031f0adfa1a4f5964e6f339ef (patch) | |
| tree | 41fdafd72433c4710bf36554a1b7f561a90aa462 | |
| parent | 8d3ac00f31e30c0ed410035067079468afa56126 (diff) | |
Fix video container size
| -rw-r--r-- | docs/docs/feature/underglow.md | 4 | ||||
| -rw-r--r-- | docs/src/css/custom.css | 18 |
2 files changed, 21 insertions, 1 deletions
diff --git a/docs/docs/feature/underglow.md b/docs/docs/feature/underglow.md index 02aac5d..780845a 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 f46a565..d9cddb8 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%; +} |