유튜브 썸네일

by Kim Ara

HTML

<!-- 유튜브 재생 전 이미지 -->
<div class="youtube-area">
  <div class="thumb-img">
    <img src="https://lgg7-thinq.co.kr/wp-content/themes/lg-g7-thinq/assets/img/boombox-contest/video1.jpg" alt="">
    <a href="#none" class="btn-play"></a>
  </div>

  <iframe src="https://www.youtube.com/embed/-VJI9h7MgiE?showinfo=0&amp;rel=0&amp;autoplay=1&amp;autohide=1&amp;&amp;controls=0" frameborder="0" allowfullscreen></iframe> 
  
</div>

CSS

.youtube-area{width:500px;height:300px;border:1px solid #ddd;position:relative;}
.youtube-area img{display:block;width:100%}

.btn-play{display:block;position:absolute;top:0;left:0;background:rgba(0,0,0,0.5) url(https://lgg7-thinq.co.kr/wp-content/themes/lg-g7-thinq/assets/img/boombox-contest/icon-play.png) 50% 50% no-repeat;width:100%;height:100%}

.youtube-area iframe{display:none;width:100%;height:100%;}

JavaScript

$('.btn-play').click(function(){
      $('.thumb-img').hide();
      $('.youtube-area iframe').show();
  });