fix: make YouTube/SlideShare embeds responsive on mobile

Author: jacdevos

_includes/2017-11-21-software-best-practice-is-dead.html

@@ -1,3 +1,9 @@
-<iframe width="800" height="450" src="https://www.youtube.com/embed/vcCgLqE4J3Q" frameborder="0" allowfullscreen></iframe>
+<div class="responsive-embed youtube">
+  <iframe src="https://www.youtube.com/embed/vcCgLqE4J3Q" frameborder="0" allowfullscreen></iframe>
+</div>
+
 <br />
-<iframe src="https://www.slideshare.net/slideshow/embed_code/key/94wzhRi8Sxavr" width="800" height="500" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:0px solid #CCC; border-width:0px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
+
+<div class="responsive-embed slideshare">
+  <iframe src="https://www.slideshare.net/slideshow/embed_code/key/94wzhRi8Sxavr" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe>
+</div>

assets/main.scss

@@ -309,8 +309,33 @@ footer span {
   }
 }
 
-// Embedded content (YouTube, SlideShare, etc.) — subtle grey background so they're not blank white rectangles
-.post iframe {
-  background: #f4f4f4;
-  border-radius: 4px;
+// Responsive embeds (YouTube, SlideShare, etc.)
+// Uses the classic padding-bottom aspect-ratio hack — works everywhere.
+// Prevents horizontal overflow from hardcoded iframe widths on mobile.
+.post .responsive-embed {
+  position: relative;
+  width: 100%;
+  margin: 1.5rem 0;
+  overflow: hidden;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background: #f4f4f4;
+    border-radius: 4px;
+  }
+}
+
+// 16:9 for YouTube / Vimeo
+.post .responsive-embed.youtube {
+  padding-bottom: 56.25%;
+}
+
+// SlideShare embeds are slightly taller than 16:9
+.post .responsive-embed.slideshare {
+  padding-bottom: 62.5%;
 }