Skip to content

Instantly share code, notes, and snippets.

@bpasero

bpasero/index.html

Created August 27, 2016 09:24
Show Gist options
  • Save bpasero/2016086c6248dfa472094772658107d4 to your computer and use it in GitHub Desktop.
Save bpasero/2016086c6248dfa472094772658107d4 to your computer and use it in GitHub Desktop.
Download ZIP
Resize iframe via CSS
Raw
index.html
<!doctype html>
<html>
<head>
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
@Uhradone
Copy link

Uhradone commented Aug 27, 2016 •
edited

The above code works with YouTube since the video can grow up to the biggest resolution YouTube can offer.
If the video is smaller and shouldn't go above it's pixel size, you get a long bottom gap underneath the video.
And if you want to pass your code to other people to embed it in their web-sites, you have to go inline with the CSS.

<!doctype html>
<html>

<head>
</head>

<body>
<figure style="max-width:640px;margin:0">
<div style="position:relative;padding-bottom:56.25%;padding-top:10px;height:0;">
<iframe id="iframeZazu" style="position:absolute;top:0;left:0;width:100%;height:100%;" width="640" height="400" src="http://www.zazudesign.de/test/" frameborder="0" allowfullscreen></iframe>
</div>
</figure>
<p>Some other element that stays close to the video</p>
</body>

</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment