Skip to content

Instantly share code, notes, and snippets.

@kgaughan

kgaughan/index.html

Created June 6, 2021 00:00
Show Gist options
  • Save kgaughan/6f72a57564b99b1c8e1903d01c97c707 to your computer and use it in GitHub Desktop.
Save kgaughan/6f72a57564b99b1c8e1903d01c97c707 to your computer and use it in GitHub Desktop.
Download ZIP
YouTube embedded player façade
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.facade, .player {
margin: 0 auto;
display: block;
}
.facade {
position: relative;
overflow: hidden;
cursor: pointer;
}
.facade img, .facade span {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.facade span {
height: 1.5em;
text-align: center;
font: 48px/1.5 sans-serif;
color: white;
text-shadow: 0 0 0.5em black;
width: 100%;
}
</style>
</head>
<body>
<div class="facade" data-id="z437fduZM3k" data-width="560" data-height="320"></div>
<script>
// YouTube embed façade
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll("div.facade").forEach((elem, _) => {
let thumb = document.createElement("img");
thumb.src = "https://i.ytimg.com/vi/" + elem.dataset.id + "/hqdefault.jpg";
thumb.width = elem.dataset.width;
thumb.height = elem.dataset.height;
thumb.loading = "lazy";
elem.appendChild(thumb);
let play = document.createElement("span");
play.innerText = "▶";
elem.appendChild(play);
elem.style.height = elem.dataset.height + "px";
elem.style.width = elem.dataset.width + "px";
elem.addEventListener("click", () => {
let iframe = document.createElement('iframe');
iframe.className = "player";
iframe.src = "https://www.youtube-nocookie.com/embed/" + elem.dataset.id + "?autoplay=1";
iframe.width = elem.dataset.width;
iframe.height = elem.dataset.height;
iframe.frameBorder = "0";
iframe.sandbox = "allow-same-origin allow-scripts";
elem.parentNode.replaceChild(iframe, elem);
}, {"once": true, "capture": true});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment