Better, Lighter YouTube Embeds

A Better Method for Embedding YouTube Videos
Compared to the current YouTube card in the Ghost editor, the method provided below saves over 500KB of page load. I tested this on my Ghost site using the same video for both embeds, and here is the Gtmetrix comparison: (GREEN is using the below linked method, and RED is using the built-in Ghost …
<div class="youtube-player" data-id="EhbsiUFL6H8"></div>

    /* Light YouTube Embeds by @labnol */
    /* Web: */

        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n];
                div.innerHTML = labnolThumb(v[n];
                div.onclick = labnolIframe;

    function labnolThumb(id) {
        var thumb = '<img src="">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;

    function labnolIframe() {
        var iframe = document.createElement("iframe");
        var embed = "";
        iframe.setAttribute("src", embed.replace("ID",;
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);