Please copy the following code and paste right above the < / body >
<script>
//<![CDATA[
/*! llyv.js v0.1.0 */
!function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i);var l=document.createElement("img");l.src="https://img.youtube.com/vi/"+t[e].dataset.id+"/hqdefault.jpg",t[e].appendChild(l),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}();
//]]>
</script>
Next copy the following code and paste it directly above the < / b : Skin >
*/
.llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer}
.llyv{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden}
.llyv img{width:100%;top:-16.82%}
.llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px}
.llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff}
.llyv .llyv-play-btn:hover{background-color:red}
.llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute}
.llyv iframe{height:100%;width:100%;top:0;left:0}
.llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
Markup in posts
<div class="llyv" data-id="id-video"></div>