Modal 影片更換
=============
###### tags: `JS`, `Jquery`, `Youtube`, `Bootstrap 4`, `Bootstrap Modal`

最近寫modal影片替換發生一些小問題，啟動第一次影片modal功能正常，第二次時卻沒辦法替換成新影片。

原本以為是因為監聽click導致，將寫法寫成不監聽click事件，而是改由modal彈出的當下，抓modal的啟動元件$(event.relatedTarget)也就是按鈕的src並替換。

$(function() {
    // 20221226 直接取影片ID放入modal(YT影片連結/分享連結/iframe src)
    let video_src;
    let video_id;
    let ytIframe =  $("#yt_modal iframe");
  

    // 取 youtube ID 
    function ytVidId(url) {
        console.log("tranlating")
        var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
        return (url.match(p)) ? RegExp.$1 : false;
    }

    // 第一次修改(按鈕帶值，點擊時取值，跑函式取id)
    // $(".video_card").on("click", function() {
    //     let video_src = $(this).data("src")
    //     video_id = ytVidId(video_src)
    // })

    // modal 顯示，替換url
    $('#yt_modal').on('show.bs.modal', function (event) {
        video_src = $(event.relatedTarget).data("src"); // modal會抓觸發的原件(按鈕)
        video_id = ytVidId(video_src);
        ytIframe.attr("src", `https://www.youtube.com/embed/${video_id}`)
    })

    // modal 消失，清空url
    $('#yt_modal').on('hidden.bs.modal', function () {
        ytIframe.attr("src", ``);
    });
})

測試結果在本機上可執行，但到伺服器上時就無法成功。
最後發現是變數`ytIframe`存取的是src尚未替換的DOM，替換過src後變數`ytIframe`已經失效，所以取消定義變數，改為每次啟動 model 時用 jquery 抓`$("#yt_modal iframe")`

$(function() {
    // 20221226 直接取影片ID放入modal(YT影片連結/分享連結/iframe src)
    let video_src;
    let video_id;
    //let ytIframe =  $("#yt_modal iframe"); // 第二次修改 取消存取物件
  

    // 取 youtube ID 
    function ytVidId(url) {
        console.log("tranlating")
        var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
        return (url.match(p)) ? RegExp.$1 : false;
    }

    // modal 顯示，替換url
    $('#yt_modal').on('show.bs.modal', function (event) {
        video_src = $(event.relatedTarget).data("src");
        video_id = ytVidId(video_src);
        //ytIframe.attr("src", `https://www.youtube.com/embed/${video_id}`)
        $("#yt_modal iframe").attr("src", `https://www.youtube.com/embed/${video_id}`) // 第二次修改 顯示的當下jquery直接抓目標
    })

    // modal 消失，清空url
    $('#yt_modal').on('hidden.bs.modal', function () {
        //ytIframe.attr("src", ``);
	$("#yt_modal iframe").attr("src", ``); // 第二次修改 顯示的當下jquery直接抓目標
    });
})