Skip to content

Instantly share code, notes, and snippets.

@jaredkc
Created May 10, 2013 17:29
Show Gist options
  • Save jaredkc/5555985 to your computer and use it in GitHub Desktop.
Save jaredkc/5555985 to your computer and use it in GitHub Desktop.
Responsive iframe (for Google Maps and such). Thanks to Niklaus Gerber: http://niklausgerber.com/blog/responsive-google-or-bing-maps/
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe>i</iframe>
</div
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%; /* adjust to reach desired ratio */
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment