Skip to content

Instantly share code, notes, and snippets.

@PadreZippo

PadreZippo/embed.html

Last active September 30, 2023 17:10
Show Gist options
  • Save PadreZippo/ab27f3f7409510f90421 to your computer and use it in GitHub Desktop.
Save PadreZippo/ab27f3f7409510f90421 to your computer and use it in GitHub Desktop.
Download ZIP
iframes with constant aspect ratios
Raw
embed.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>
Raw
style.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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment