Skip to content

Instantly share code, notes, and snippets.

@johndwells

johndwells/index.html

Last active December 4, 2022 22:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johndwells/65d4389b81dd5b181f6fc2dbf364d400 to your computer and use it in GitHub Desktop.
Save johndwells/65d4389b81dd5b181f6fc2dbf364d400 to your computer and use it in GitHub Desktop.
Download ZIP
Use Tailwind CSS & Alpine JS to emulate `object-fit: cover` with a Vimeo embed
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div class="relative w-[100vw] h-[100vh]">
<div class="absolute z-0 inset-0"
x-on:resize.window="resize()"
x-data="{
width: 1600,
height: 900,
get ratio() {
return this.height / this.width;
},
get inverseRatio() {
return this.width / this.height;
},
init() {
this.resize();
},
resize() {
const w = this.$root.offsetWidth;
const h = this.$root.offsetHeight;
const containerRatio = h / w;
if (containerRatio > this.ratio) {
this.$refs.iframe.style.width = `${h * (this.inverseRatio)}px`;
this.$refs.iframe.style.height = `${h}px`;
} else {
this.$refs.iframe.style.width = `${w}px`;
this.$refs.iframe.style.height = `${w * (this.ratio)}px`;
}
}
}">
<iframe src="https://player.vimeo.com/video/771349013?h=232b3b418b&amp;app_id=122963&playsinline=1&background=1"
x-ref="iframe"
allow="autoplay"
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></iframe>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment