Responsively size YouTube embeds

2 files changed, 37 insertions, 13 deletions

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index f2920686..77b2f8da 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -29,6 +29,20 @@ button, input, textarea, select {
     margin: 0
 }
 
+.video-container {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;
+}
+.video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
 .btn, .form-control, .link, .reset {
     background-color: transparent;
     padding: 0;
diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index 0c8fc61c..9c7817e9 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -53,7 +53,9 @@
 
             <div class="cd-timeline__content text-component">
                 <h2>Our logo is born. Thanks @Aperture!</h2>
-                <p class="color-contrast-medium"><img src="https://raw.githubusercontent.com/python-discord/branding/master/logos/logo_discord/logo_discord_256.png"></p>
+                <p class="color-contrast-medium"><img
+                        src="https://raw.githubusercontent.com/python-discord/branding/master/logos/logo_discord/logo_discord_256.png">
+                </p>
 
                 <div class="flex justify-between items-center">
                     <span class="cd-timeline__date">Feb 3rd, 2018</span>
@@ -229,9 +231,11 @@
 
             <div class="cd-timeline__content text-component">
                 <h2>PyDis hits 15,000 members; the “hot ones special” video is released</h2>
-                <iframe width="560" height="315" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen></iframe>
+                <div class="video-container">
+                    <iframe class="video" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen></iframe>
+                </div>
 
                 <div class="flex justify-between items-center">
                     <span class="cd-timeline__date">Apr 8th, 2019</span>
@@ -300,9 +304,11 @@
                     developers join us to judge the event and help out our members during the event. One of them,
                     @tshirtman, even joins our staff!</p>
 
-                <iframe width="560" height="315" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen></iframe>
+                <div class="video-container">
+                    <iframe class="video" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen></iframe>
+                </div>
 
                 <div class="flex justify-between items-center">
                     <span class="cd-timeline__date">Jan 17, 2020</span>
@@ -356,9 +362,11 @@
                     Several of the Code Jam participants also end up getting involved contributing to the Arcade
                     repository.</p>
 
-                <iframe width="560" height="315" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen></iframe>
+                <div class="video-container">
+                    <iframe class="video" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen></iframe>
+                </div>
 
                 <div class="flex justify-between items-center">
                     <span class="cd-timeline__date">Apr 17th, 2020</span>
@@ -427,9 +435,11 @@
                     Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic
                     projects. Check them out in our judge stream below:</p>
 
-                <iframe width="560" height="315" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen></iframe>
+                <div class="video-container">
+                    <iframe class="video" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen></iframe>
+                </div>
 
                 <div class="flex justify-between items-center">
                     <span class="cd-timeline__date">Jul 31st, 2020</span>