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

Revisions

  1. kgaughan created this gist Jun 6, 2021.
    67 changes: 67 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    <!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>