Responsive iframe with 9:16 aspect ratio (vertical)

Question

I'm trying to fix the embed of some facebook live video, and I know very well how to manage with css a responsive video:

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

My video is vertical, so instead of 16:9 is 9:16. If I divide 16:9 is 1.77, but with

padding-top: 177%

it doesnt' work. Any idea=

Wouldn't you want to apply the padding to the left/right/both side(s) in that case? Padding works inside the box, so anything > 100% doesn't make sense, as the box is already all padding, no content. — Heretic Monkey, Feb 05 '21 at 16:19
Wait....? Do you want an iFrame to be responsive? Edited my answer to include an iFrame aswell. — sxkx, Feb 05 '21 at 16:44
@HereticMonkey that's the purpose of the padding trick. Making the padding define all the area and have the content position:absolute above the padding (we have better way actually but this is the old and very popular one) — Temani Afif, Feb 05 '21 at 19:46
@TemaniAfif Never heard of it in my 20+ years of doing this, but I mainly build business apps so I'll take your word for it. ;) — Heretic Monkey, Feb 05 '21 at 20:04
@HereticMonkey here is probably the most viewed answer around this subject: https://stackoverflow.com/a/10441480/8620333 and you will find the position:absolute trick at the end (most of the answers there to do the same btw) — Temani Afif, Feb 05 '21 at 20:10

sxkx · Answer 1 · 2021-02-05T16:48:44.350

This is responsive, you can change the article width and the image will scale with proper aspect ratios.

.article{
    width:320px;
    padding:0 16px;
}
/* Responsive aspect-ratio box */
.aspect-box{
    position:relative;
    width:100%;
    height:0;
    padding-top:177%;
    overflow:hidden;
}
.aspect-box img,
.aspect-box iframe{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}

<div class="article">
    <p>content before..</p>
    <div class="aspect-box">
        <img src="https://via.placeholder.com/450x800.png" alt="demo image" /> 
    </div>
    <div class="aspect-box">
        <iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe> 
    </div>
    <p>content after..</p>
</div>

Responsive iframe with 9:16 aspect ratio (vertical)

1 Answers1