Add Display Responsive iframe Maintaining Aspect Ratio as css til

README.md

@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_961 TILs and counting..._
+_962 TILs and counting..._
 
 ---
 
@@ -115,6 +115,7 @@ _961 TILs and counting..._
 - [Conditional Styling For Unsupported CSS Features](css/conditional-styling-for-unsupported-css-features.md)
 - [Create A Pulsing Background With CSS Animation](css/create-a-pulsing-background-with-css-animation.md)
 - [Define CSS Custom Properties With CSS Variables](css/define-css-custom-properties-with-scss-variables.md)
+- [Display Responsive iframe Maintaining Aspect Ratio](css/display-responsive-iframe-maintaining-aspect-ratio.md)
 - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
 - [Give Elements The Same Width With Flexbox](css/give-elements-the-same-width-with-flexbox.md)
 - [Let Pointer Events Pass Through An Element](css/let-pointer-events-pass-through-an-element.md)

css/display-responsive-iframe-maintaining-aspect-ratio.md

@@ -0,0 +1,40 @@
+# Display Responsive iframe Maintaining Aspect Ratio
+
+Generally when rendering an iframe, you'll specify the `width` and `height`
+properties to give it a fixed display size.
+
+You can make the iframe responsively expand to the full width of its parent
+while maintaining its aspect ratio using a little CSS.
+
+First, remove the `width` and `height` properties.
+
+Second, add a wrapping iframe container:
+
+```html
+<div class="iframe-container">
+  <iframe src="https://www.youtube.com/embed/7LDlUMMbv6k" ...></iframe>
+</div>
+```
+
+Third, sprinkle on a little CSS to make it responsive:
+
+```css
+.iframe-container {
+  position: relative;
+  overflow: hidden;
+  /* 16:9 aspect ratio */
+  padding-top: 56.25%;
+}
+
+.iframe-container iframe {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border: 0;
+}
+```
+
+Ben Marshall has a whole [guide to responsive
+iframes](https://www.benmarshall.me/responsive-iframes/).