[jquery] Youtube 를 Thumnail (썸네일) 넣어서 연동해보자.

유투브 영상을 클릭하기 전에 내가 원하는 썸네일 이미지를 넣어서 연동하도록 작업해 보자.

 

내가 원하는 유투브 썸네일 이미지

썸네일을 클릭하면 본격적으로 유투브 영상이 재생된다.

 

 

<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
 
 
<img src="/img/main/temp01.jpg" alt="이미지썸네일" class="play" id="play"/>
<iframe id ="promotion_video" width="100%" height="100%" src="https://www.youtube.com/embed/7KEeswOP1D8/" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
<script>
$(document).on('click','.play', function(e){
    e.preventDefault();
    var play_button = this;
    play_button.style.display = "none";
    $('#promotion_video')[0].src +='?autoplay=1';
})
</script>