Youtube iframe to image-link + click link change to iframe

Вот такой хак замены ифрейм плеера на картинку и при клики меняем назад на ифрейм с видео.

jQuery:

function changeiframe() {
	objs = document.querySelectorAll('iframe[src*="youtube"]');
        if (!objs[0]){return false;};
        if (objs[0]) {
        vidid = objs[0].src.split('/')[4].split('?')[0];
        linkurl = 'http://www.youtube.com/embed/'+vidid;
        imgurl = 'http://i4.ytimg.com/vi/'+vidid+'/hqdefault.jpg';
        link = document.createElement('a');
		link.setAttribute('class','youtube_vid');
        link.setAttribute('href',linkurl);
        //link.setAttribute('target','_blank');
		
        img = document.createElement('div');
		img.setAttribute('class','youtube-box');
		img.setAttribute('style','background:url('+imgurl+')');
		
		play_btn = document.createElement('span');
		play_btn.setAttribute('class','youtube-play');
		img.appendChild(play_btn);
		
        link.appendChild(img);
        objs[0].outerHTML = link.outerHTML;
        }
        changeiframe();
    }
changeiframe();
jQuery(document).ready(function(){
	jQuery('.youtube_vid').click(function(e) {
		e.preventDefault();
		var url = jQuery(this).attr('href');
		jQuery(this).replaceWith('<iframe style="width: 100%;margin:0 auto;" width="420" height="315" src="' + url + '?autoplay=1"></iframe>');
	});
});

и CSS:

.youtube-box {
    background-attachment: scroll !important;
    background-position: 0 -15px !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border: 2px solid #c01c0f;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: 200px;
    position: relative;
    width: 300px;
}
.youtube-box .youtube-play {
    background: url("https://coding.dp.ua/wp-content/uploads/other/play.png") no-repeat scroll left top transparent;
    cursor: pointer;
    height: 56px;
    left: 50%;
    margin: -28px 0 0 -42px;
    top: 50%;
    width: 83px;
	position: absolute;
}
.youtube-box .youtube-play:hover {
    background-position: left bottom;
}