Bootstrap_影片彈出視窗(實作)

本文总阅读量次

目的：點擊影片後顯示彈出視窗，並自動播放影片內容

  • 設置HTML樣板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  <!-- VIDEO PLAY -->
<section id="video-play">
  <div class="dark-overlay"> 
    <div class="container p-5"> 
    <div class="row">
      <div class="col">
          <a href="#" class="video" data-video="https://www.youtube.com/embed/SjJ08V166uU" data-toggle="modal" data-target="#videoModal">
            <i class="fas fa-play fa-3x"></i><!--data-toggle 通常會伴隨一個icon，告知系統在點擊後會觸發另一個行動 -->
          </a>
          <h1>Watch Our Publicity Film</h1>
        </div>
      </div>
    </div>
  </div>
</section>
  • 點擊後開啟Modal互動視窗
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- VIDEO MODAL -->
<div class="modal fade" id="videoModal"> <!--點擊後淡化原視窗背景顏色 -->
  <div class="modal-dialog"><!-- 影片左右置中進行-->
    <div class="modal-content">
      <div class="modal-body">
        <button class="close" data-dismiss="modal"><!--關閉鈕 -->
          <span>&times;</span>
        </button>
        <iframe src="" frameborder="0" height="350" width="100%" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>
  • 套用JQ影片播放語法
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Video Play
$(function () {
  // Auto play modal video
  $(".video").click(function () {
    var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-video"),
      videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
    $(theModal + ' iframe').attr('src', videoSRCauto);
    $(theModal + ' button.close').click(function () {
      $(theModal + ' iframe').attr('src', videoSRC);
    });
  });
});

實作成品

彈出式影片: 運動頻道