diff --git a/README.md b/README.md index a02597e..d2791e2 100644 --- a/README.md +++ b/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) diff --git a/css/display-responsive-iframe-maintaining-aspect-ratio.md b/css/display-responsive-iframe-maintaining-aspect-ratio.md new file mode 100644 index 0000000..1c9292b --- /dev/null +++ b/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 +
+ +
+``` + +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/).