Responsive Iframe With Preserved Aspect Ratio

Question

I am new to coding and community and i am trying to embed YouTube iframes responsively. So far all i do is replacing the original width value with 100%.

 <iframe width="100%" height="315" src="https://www.youtube.com/embed/kXBunIe_PSw" frameborder="0" allowfullscreen></iframe>

Yes it makes it responsive since the height is static there are lots of black space. Is there any simple way to prevent this.

I prefer css solutions but javascript is also welcomed.

You can try to add `padding-top` to the video wrapper. `padding-top:56.25%` results in 16:9 aspect ratio. — I haz kode, Jul 31 '17 at 07:56
@Ihazkode so i should create a div around the iframe and add padding-top to it. Am i getting right? — Yeşim Ela Gülcan, Jul 31 '17 at 07:58

score 0 · Answer 1 · answered Jul 31 '17 at 07:59

.videoWrapper {
 position:relative;
 padding-bottom:56.25%;
 margin:auto;
 height:0;
}
.videoWrapper iframe {
 background-color:#f2f2f2;
 position:absolute;
 max-width:100%;
 max-height:315px;
 width:95%;
 height:95%;
 left:0;
 right:0;
 margin:auto;
}

    <div class='videoWrapper'>
      <iframe id='video' class='trailervideo' width='560' height='315' src='https://www.youtube.com/embed/hhR3DwzV2eA' src='about:blank' frameborder='0' allowfullscreen></iframe>
    </div>

Let me know, if it does not work

score 0 · Answer 2 · answered Jul 31 '17 at 08:06

This should help you get started.

Ref: Bootstrap

.responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

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

.video {
  padding-bottom: 56.25%;  /* or 75% depending upon the type of video you have */
}

<div class="responsive video">

  <iframe src="https://www.youtube.com/embed/kXBunIe_PSw" allowfullscreen></iframe>

</div>

Responsive Iframe With Preserved Aspect Ratio

2 Answers2