用JS程式做一個彈出swal視窗中的youtube影片停止播放功能-教學撰寫:徐嘉裕Neil hsu

最近在幫客戶開發模組剛好有用到一個功能，就是使用swal開新視窗播放youtube影片，像是下面這樣

看起來不難做，吧youtube影片崁入到swal視窗中就完成了!!

經測試影片的確也能播放，但發現一個問題，就是點選OK關閉swal視窗時，雖然區塊消失了，但youtube影片還是再繼續播放，因為還有背影聲音，也就是說關閉swal視窗並無法關閉正在播放中的youtube影片，必須要有youtube控制程式才能關閉影片，這還真是傷腦筋，上網查了一下相關說明，找到一個不錯的youtube影片控制方法修改一下分享給大家

需要準備的工作，
1、youtube網址後方要加上?enablejsapi=1
2、iframe要加上class='youtube-video'

所以整個CODE就是

//影片播放

$(document).ready(function() {

$("body").on("click", "#youtubebtn", function (){

$youtubebtn = $("#youtubebtn").attr("mane");

var $youtubebtnArr = $youtubebtn.split(','); //切割陣列

$title=$youtubebtnArr[0]; //影片標題

$lotteryurl=$youtubebtnArr[1]; //影片ID值，就是watch?v=後面的那一段參數

youtubebfunction($title,$lotteryurl);

})

function youtubebfunction($title,$lotteryurl){

swal({

title: "<h3>"+$title+"</h3>",

text: "<iframe class='youtube-video' width=100% height=450 src=https://www.youtube.com/embed/"+$lotteryurl+"?enablejsapi=1 frameborder=0 gesture=media allow=encrypted-media allowfullscreen></iframe>",

html: true

});

}

//停止youtube影片

$(this).click(function() {

$('.youtube-video').each(function() {

this.contentWindow.postMessage('{"event": "command", "func": "' + 'stopVideo' + '", "args": ""}', '*');

});

});

});

這樣就沒問題了，關閉swal視窗視窗同時也會停止youtube影片，不會在背景中繼續播放!!

參考資料來源：https://developers.google.com/youtube/iframe_api_reference

教學撰寫：徐嘉裕 Neil hsu