SkinnyYT.css

<style>

        .youtube {
            position: relative;
            padding-bottom: 56.23%;
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
            margin: 5px;
        }
        
        .youtube iframe,
        .youtube object,
        .youtube embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            background: transparent;
        }
        
        .youtube img {
            bottom: 0;
            display: block;
            left: 0;
            margin: auto;
            max-width: 100%;
            width: 100%;
            position: absolute;
            right: 0;
            top: 0;
            border: none;
            height: auto;
            cursor: pointer;
            -webkit-transition: .4s all;
            -moz-transition: .4s all;
            transition: .4s all;
        }
        
        .youtube img:hover {
            -webkit-filter: brightness(75%);
        }
        
        .youtube .play {
            height: 72px;
            width: 72px;
            left: 50%;
            top: 50%;
            margin-left: -36px;
            margin-top: -36px;
            position: absolute;
            background: url("//i.imgur.com/TxzC70f.png") no-repeat;
            cursor: pointer;
        }

    
</style>  

SkinnyYT.html

<center>
				<div class="youtube" data-id="0rlaScqgJHY"><div data-id="0rlaScqgJHY"><div class="play"></div></div></div>
</center>

SkinnyYT.js

    /* Skinny YouTube Embeds by Loud */
    
    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = loudThumb(v[n].dataset.id);
                div.onclick = loudIframe;
                v[n].appendChild(div);
            }
        });

    function loudThumb(id) {
        var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }

    function loudIframe() {
        var iframe = document.createElement("iframe");
        iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1&showinfo=0");
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }


  </script>