Вопрос о JavaScript объеме и можно ли выполнить sh, что я пытаюсь сделать

Question

Я пытаюсь динамически изменить videoID клика API YouTube. У меня есть список элементов, данные которых sr c содержат URL YouTube. Когда пользователь нажимает на ссылку, появляется модал, воспроизводящий это конкретное видео. Как только видео заканчивается, оно перенаправляется на другую страницу.

Если я жестко закодирую идентификатор, он прекрасно работает, но я не могу этого сделать.

Моя единственная проблема в том, что я не могу получить videoID из-за до JavaScript объема. Есть что-нибудь, что вы бы порекомендовали мне попробовать?

    $(document.body).on('click', ".video-btn", function (e) {
        var $videoSrc = $(this).data("src");
        console.log($videoSrc);

        var **getVidID** = $videoSrc.substring(26);
        console.log(getVidID); 
    });

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            playerVars: {
                'controls': 0
            },
            width: 1920,
            height: 1080,
            videoId: **getVidID,** I'd like to use the videoID here
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    };

    function onPlayerReady(event) {
        event.target.playVideo();
    };

    var done = false;
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED && !done) {
            alert('Taking you to Review Material Now..')
            window.location.replace("http://www.google.com");
            done = true;
        }
    };

Answer 1

Вот один из способов сделать это:

var getVidID; 
$(document.body).on('click', ".video-btn", function (e) {
    var $videoSrc = $(this).data("src");
    console.log($videoSrc);

    getVidID = $videoSrc.substring(26);
    console.log(getVidID); 
});

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
    console.log(getVidID);
    player = new YT.Player('player', {
        playerVars: {
            'controls': 0
        },
        width: 1920,
        height: 1080,
        videoId: **getVidID,** I'd like to use the videoID here
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
};

Имейте в виду: у getVidID может не быть значения, в зависимости от того, где / когда вы вызываете onYouTubeIframeAPIReady(). Функция события click должна быть запущена до получения идентификатора. Итак, вы можете проверить, что оно имеет значение, прежде чем использовать его в этой другой функции. Также имейте в виду, что значение этой переменной изменяется только при возникновении события click ...