abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-03 07:08:01 +00:00
Code Issues Projects Releases Wiki Activity

Add Display Responsive iframe Maintaining Aspect Ratio as css til

Browse Source
This commit is contained in:
jbranchaud
2020-11-27 16:50:41 -06:00
parent a6d513138d
commit 3c8e82d821
2 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -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). 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) - [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) - [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) - [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) - [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) - [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) - [Let Pointer Events Pass Through An Element](css/let-pointer-events-pass-through-an-element.md)

40
css/display-responsive-iframe-maintaining-aspect-ratio.md Normal file
View File

@@ -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/).