Skip to content

Instantly share code, notes, and snippets.

@profstein

profstein/Readme.md

Last active August 29, 2015 14:00
Show Gist options
  • Save profstein/11376618 to your computer and use it in GitHub Desktop.
Save profstein/11376618 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive iFrame Styling
Raw
Readme.md

Embedded iFrame Examples

The basic idea here is that you add a wrapper element around your iFrame and then set it to 0 height. Then you add padding-bottom using percentage so the element has the same aspect ratio of the iFrame you are embedding.

Aspect ratio is just a fancy word for the relationship of th width to the height. If that relationship stays the same, the iframe will look right as it grows and shrinks.

To get the padding-bottom percent you just divide the height of your iframe by the width and then move the decimal two places to the right.

For the YouTube video you will see that an extra padding-top has been applied. This is because YouTube also adds controls which add to the height. If what you're embedding doesn't have this (like the maps below) then you can remove it. If what you're embedding has more or less added then you can adjust the number.

Raw
mapsexample.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube and Google Maps Embed Example</title>
<style>
/* =====================================
CSS for <iframe> embedded Google Map
===================================== */
.mapWrapper {
position: relative;
padding-bottom: 66.6666667%;
/*
do math with the height of your iframe divided by the width, then converted to percent
in this example the height is 400 and the width is 600
400 / 600 = .66666667
which is 66.6666667% */
height: 0;
}
.mapWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>Google Maps Example</h2>
<div class="mapWrapper">
<iframe width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=199+Chambers+Street,+New+York,+NY&amp;aq=0&amp;oq=199+Chambers&amp;sll=40.697488,-73.979681&amp;sspn=0.750684,1.187897&amp;ie=UTF8&amp;hq=&amp;hnear=199+Chambers+St,+New+York,+10007&amp;t=m&amp;z=14&amp;ll=40.717367,-74.012178&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=199+Chambers+Street,+New+York,+NY&amp;aq=0&amp;oq=199+Chambers&amp;sll=40.697488,-73.979681&amp;sspn=0.750684,1.187897&amp;ie=UTF8&amp;hq=&amp;hnear=199+Chambers+St,+New+York,+10007&amp;t=m&amp;z=14&amp;ll=40.717367,-74.012178" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div> <!-- end .mapWrapper-->
</body>
</html>
Raw
youtube.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube and Google Maps Embed Example</title>
<style>
/* =====================================
CSS for <iframe> embedded element
===================================== */
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
/* if your video is 4:3 ratio then use the padding-bottom below:*/
/*padding-bottom: 75%;*/ /* 4:3 */
padding-top: 25px; /* may need to adjust depending on the size of the player controls of the service you use */
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>YouTube Example</h2>
<div class="videoWrapper">
<!-- iframe below is Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/KqzO_1k44DU?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div><!-- end .videoWrapper -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment