[youtube] 유튜브 영역에 intro image 넣고 클릭 시 동영상 자동 재생

유튜브 재생 버튼 jquery로 만들기

 

 

html

<div class="vod_conbox">
	<div class="vod_thumb">
		<div class="youtube_box"></div>
	</div>
</div>

 

 

css

.vod_conbox{
    overflow: hidden;
    position: relative;
    height: 0;
    width: 100%;
    /* padding-top: 30px; */
    padding-bottom: 56.25%;
}
.vod_conbox iframe,
.vod_conbox object,
.vod_conbox embed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.vod_thumb{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #000; //intro 이미지 들어갈 부분
    cursor: pointer;
}

 

 

script

function vodThumb(){
    var vodThumb = $('.vod_thumb'),
        playurl = '',
        playHtml = '',
        playurl = 'https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1';

    vodThumb.on('click', function(){
        playHtml = '<iframe src="' + playurl +'" title="youtube player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
        $(this).find('.youtube_box').html(playHtml);
    });
}