Responsive iframe

Small snippet for a responsive iframe solution with fixed aspect-ratio.

by Ea Bangalore

HTML

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
<!--     <img class="ratio" src="http://placehold.it/16x9" /> -->
    <iframe src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

CSS

.wrapper {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  background: #CCC
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}