Merge 3719b4943a into f578727349

Use modern way to achieve aspect-ratio without any hacks and workarounds.

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

@@ -1,4 +1,4 @@
-# Display Responsive iframe Maintaining Aspect Ratio
+# Display Responsive iframe Maintaining Aspect Ratio modern way
 
 Generally when rendering an iframe, you'll specify the `width` and `height`
 properties to give it a fixed display size.
@@ -6,9 +6,8 @@ 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:
+1. First, remove the `width` and `height` properties.
+2. Second, add a wrapping iframe container:
 
 ```html
 <div class="iframe-container">
@@ -16,23 +15,12 @@ Second, add a wrapping iframe container:
 </div>
 ```
 
-Third, sprinkle on a little CSS to make it responsive:
+3. 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;
+  aspect-ratio: 16 / 9;
 }
 ```