Skip to content

Instantly share code, notes, and snippets.

@conschneider

conschneider/css

Forked from PadreZippo/embed.html
Created June 16, 2020 13:54
Show Gist options
  • Save conschneider/c5e1948af8110a25286cf262ca4141d0 to your computer and use it in GitHub Desktop.
Save conschneider/c5e1948af8110a25286cf262ca4141d0 to your computer and use it in GitHub Desktop.
Download ZIP
iframes with constant aspect ratios
Raw
css
.ratio-16-9,
.ratio-16-10,
.ratio-square {
display: block;
position: relative;
width: 100%;
height: 0;
}
.ratio-16-9 {
padding-top: 56.25%; /* This is your aspect-ratio */
}
.ratio-16-10 {
padding-top: 62.5%; /* This is your aspect-ratio */
}
.ratio-square {
padding-top: 100%; /* This is your aspect-ratio */
}
.ratio-inner {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
Raw
html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- This iframe will always fill the parent width, but will remain at 16:9 aspect ratio -->
<div class="ratio-16-9">
<iframe class="ratio-inner" src="https://sketchfab.com/models/{{model_id}}/embed"></iframe>
</div>
<!-- This iframe will always fill the parent width, but will remain at 16:10 aspect ratio -->
<div class="ratio-16-10">
<iframe class="ratio-inner" src="https://sketchfab.com/models/{{model_id}}/embed"></iframe>
</div>
<!-- This iframe will always fill the parent width, but will remain a square -->
<div class="ratio-square">
<iframe class="ratio-inner" src="https://sketchfab.com/models/{{model_id}}/embed"></iframe>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment