유튜브 영상 팝업 작업 - 자동 재생, 자동 정지

◆ 유튜브 영상을 팝업으로 보여줄 때

1. 팝업이 열릴 때 자동 재생

2. 팝업이 닫힐 때 자동 정지

 

html

<a class="pop_open" href="#">PLAY</a>

<div class="gray_mask"></div> 

<div id="popup">
    <a class="close" href="#">CLOSE</a>
    <div class="youtube">
     <div class="video">
      <iframe class="youtube" width="560" height="315" src="https://www.youtube.com/embed/H8YW1tlsmE8?amp;autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
    </div>
</div>

 

css

.gray_mask{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
}

#popup{
  display:none;
  position:absolute;
}

 

jQuery

$(function(){
  
    var embed = $('.youtube');
    $('.video').empty();
    
    /* click 'PLAY'  button */
    $('.pop_open').click( function() {
      // show popup background
      $('.gray_mask').show();
      // show popup 
      $('#popup').show();
      // append youtube iframe on popup
      $('.video').append(embed);
    });
 
  /* click 'CLOSE' button */
  $('.gray_mask, .close').click( function() {
    // hide popup background
    $('#popup').hide();
    // hide popup 
    $('.gray_mask').hide();
    // empty youtube iframe on popup
    $('.video').empty(); 
  }); 
  
  /* click 'popu background' */
  $('.gray_mask, .close').click( function() {
    // hide popup background
    $('#popup').hide();
    // hide popup 
    $('.gray_mask').hide();
    // empty youtube iframe on popup
    $('.video').empty(); 
  }); 
  
});

소스 : CODE PEN of Kangdanne

 

 

유튜브 영상을

팝업으로 보여줄 때