Skip to content

Instantly share code, notes, and snippets.

@JasonBernert

JasonBernert/About.md

Last active July 8, 2020 00:24
Show Gist options
  • Save JasonBernert/6cca3778bf10b9ccef179b5e000dd709 to your computer and use it in GitHub Desktop.
Save JasonBernert/6cca3778bf10b9ccef179b5e000dd709 to your computer and use it in GitHub Desktop.
Download ZIP
Squarespace Vimeo Lightbox embed
Raw
About.md
Raw
embed.html
<html>
<style>
#vimeo-pop-lightbox {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
background-color: rgba(0, 0, 0, 0.7);
}
#vimeo-pop-container {
height: 100%;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 1080px;
}
#vimeo-pop-iframe {
height: 100%;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#vimeo-pop-close {
fill: white;
cursor: pointer;
height: 44px;
width: 44px;
position: absolute;
right: 20px;
top: 20px;
z-index: 100000;
}
</style>
<script>
$("body")
.on("click", ".vimeo-launch", function () {
var videoID = $(this).data("vimeo-id"),
$video = `
<div id="vimeo-pop-lightbox">
<div id="vimeo-pop-container">
<svg viewBox="0 0 512 512" width="100" title="window-close" id="vimeo-pop-close">
<path d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z" />
</svg>
<iframe id="vimeo-pop-iframe" src="https://player.vimeo.com/video/${videoID}/?title=1&amp;byline=1&amp;portrait=0&amp;autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
`;
$("body").append($video);
})
.on("click", "#vimeo-pop-close", function () {
$("#vimeo-pop-lightbox").remove();
});
</script>
<img src="https://images.squarespace-cdn.com/content/v1/5e28820ce4ed2f69fcd7e019/1593183272174-Y631BIW11YKZ4G0N0TJL/ke17ZwdGBToddI8pDm48kO1CCJTstdnEk4iw-QBBOVhZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZUJFbgE-7XRK3dMEBRBhUpz6Y52bKh0Iq3MummUL44IRCeUYmHpn8-AnF_-jbTZYD12lg4UbEDL2DFKxyDvHlBw/ipad.png" class="vimeo-launch" data-vimeo-id="426322215"></img>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment