Youtube video customized(button, video overlay as image)

//HTML & JS
//Note that, data-id must be the same as iframe emnbeded id
<div class="col-lg-12" id="ic-lazarVideoHolder">
  <div class="ic-youtube-player" data-id="su3k7Vk81oM">
    <script>
        document.addEventListener("DOMContentLoaded",
                function() {
                    var div, n,
                            v = document.getElementsByClassName("ic-youtube-player");
                    for (n = 0; n < v.length; n++) {
                        div = document.createElement("div");
                        div.setAttribute("data-id", v[n].dataset.id);
                        div.innerHTML = labnolThumb(v[n].dataset.id);
                        div.onclick = labnolIframe;
                        v[n].appendChild(div);
                    }
                });

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

        function labnolIframe() {
            var iframe = document.createElement("iframe");
            var embed = "https://www.youtube.com/embed/ID?autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0";
            iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("allowfullscreen", "1");
            this.parentNode.replaceChild(iframe, this);
        }
    </script>
  </div>
</div>
//CSS
#ic-lazarVideoHolder {
    margin-top: 10px;
}
.ic-youtube-player {
    position: relative;
    padding-bottom: 56.23%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}
.ic-youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}
.ic-youtube-player img:hover {
	-webkit-filter: brightness(75%);
}
.ic-youtube-player 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;
}
.ic-youtube-player .play {
	height: 72px;
	width: 72px;
	left: 50%;
	top: 50%;
	margin-left: -36px;
	margin-top: -36px;
	position: absolute;
	background: url("../images/play.png") no-repeat;
	cursor: pointer;
}