在作專案的時候，大部分都是使用Bootstrap
這次就來使用JQuery製作點擊按鈕可彈出Youtube的影片

HTML

class命名開頭有js的部分則是要寫入js控制按鈕

<button id="js-startbtn" class="button">播放影片</button>

<div class="modal is-hide">
  <iframe width="80%" height="80%"  src="https://www.youtube.com/embed/IFTZtuXKzFs" frameborder="0" allowfullscreen></iframe>
  <a class="modal-close js-modal-close">X</a>
</div>

CSS(SCSS)

.button{
  outline: 0;
  border: 0;
  padding: 1em 3.5em;
  cursor: pointer;
  color: #fff;
  background-color: #ffb74d;
}

.modal{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
  iframe{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    display:block;
  }
  .modal-close{
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px;
    color: #444;
    background-color: #fff;
  }
}

.is-hide{
  display: none;
}

JQuery

$(function(){
  var $modal = $('.modal');
  var HIDE_CLASS = 'is-hide';
  
  $('#js-startbtn').on('click',function(){
    $modal.removeClass(HIDE_CLASS);
  });
  
  $('.js-modal-close').on('click',function(){
    $modal.addClass(HIDE_CLASS);
  });
});

範例網址