CODEWITHSUNDEEP
css
Roberto Pezzali
Roberto Pezzali

Reputation: 2504

Responsive iframe with 9:16 aspect ratio (vertical)

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=

Upvotes: 1

Views: 4493

Answers (1)

sxkx
sxkx

Reputation: 632

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>

Upvotes: 2

Related Questions