Responsive iframe

Πως να δημιουργήσετε ένα responsive iframe, μόνο με css

by Michael Tetteris

HTML

<body>
  <h1>Responsive iframes, κατάλληλα για κινητά και tablet</h1>
  <div class='ttrp-frame'>
    <iframe width="853" height="480" src="https://www.youtube.com/embed/tLecjUI6j1k" frameborder="0" allowfullscreen></iframe>
  </div>
</body>

CSS

.ttrp-frame {
  position: relative;
  padding-bottom: 56.25%;
  /* 65.25% for 4:3 */
  padding-top: 30px;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ttrp-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}