<!DOCTYPE html><html lang=en><head>    <meta charset=UTF-8>    <title>Youtube Iframe load on thumb click</title>    <style>        .youtube {            position: relative;            padding-bottom: 56.25%;            height: 0;            overflow: hidden;            max-width: 100%;        }        .youtube iframe, .youtube object, .youtube embed {            position: absolute;            top: 0;            left: 0;            width: 100%;            height: 100%;        }        .youtube__img {            bottom: 0;            display: block;            left: 0;            margin: auto;            max-width: 100%;            width: 100%;            position: absolute;            right: 0;            top: 0;            height: auto;            cursor: pointer;        }        .youtube__play {            height: 72px;            width: 72px;            left: 50%;            top: 50%;            margin-left: -36px;            margin-top: -36px;            position: absolute;            background: url(http://i.imgur.com/TxzC70f.png) no-repeat;            cursor: pointer;        }    </style></head><body style=max-width: 800px; margin: 0 auto><div class=youtube data-id=JLf9q36UsBk></div><p>Credits to <a href=http://embedresponsively.com/>embedresponsively.com for Responsive embed</a>, <a href=http://www.labnol.org/internet/light-youtube-embeds/27941/>labnol.org For the javascript functionality</a></p><script>    (function () {        var v = document.getElementsByClassName(youtube);        for (var n = 0; n < v.length; n++) {            var p = document.createElement(div);            p.innerHTML = labnolThumb(v[n].dataset.id);            p.onclick = labnolIframe;            v[n].appendChild(p);        }    })();    function labnolThumb(id) {        return '<img class=youtube__img src=//i.ytimg.com/vi/' + id + '/hqdefault.jpg><div class=youtube__play></div>';    }    function labnolIframe() {        var iframe = document.createElement(iframe);        iframe.setAttribute(src, //www.youtube.com/embed/ + this.parentNode.dataset.id + ?autoplay=1);        iframe.setAttribute(frameborder, 0);        iframe.setAttribute(allowfullscreen, 1);        iframe.setAttribute(id, youtube-iframe);        this.parentNode.replaceChild(iframe, this);    }</script></body></html>What it is supposed to do?This is going to make page faster to load if you have youtube iframe in your page. This code will replace all divs like<div class=youtube data-id=JLf9q36UsBk></div>With youtube thumbnail image. And only when user clicks on it it will load the iframe.This is a mix I've made based on labnol script and embed resposively. (basically I just renamed and removed some classes)demo on codepen http://codepen.io/AucT/pen/PzvyXqHelp improve code. I want it to be as efficient as possible.p.s. you can use jQuery
Youtube Iframe load only when thumbnail image is clicked
javascript;html;css