YouTube IFrame API - 從data-video-id設置視頻ID

我在加載YouTube的IFrame API後，有人點擊我網站上的按鈕。它加載在模態窗口中。在這個按鈕上，我也有一個「data-video-id」屬性中的視頻ID。有沒有辦法將視頻ID動態加載到YouTube API中，而不是像下面那樣在API代碼中靜態聲明視頻ID？YouTube IFrame API - 從data-video-id設置視頻ID

var player; 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('video-placeholder', { 
     height: '1920', 
     width: '1080', 
videoId: 'GfCPFk8lyhM', <---(how do I make this dynamic?) 
     playerVars: { 
      modestbranding: 1, 
      rel: 0, 
     }, 
     events: { 
      'onReady': onPlayerReady 
     } 
    }); 
}

感謝，布賴恩

來源

2017-08-04 Brian

將其送到功能像這樣的參數。我沒有使用這個API，但是這裏有一個關於如何使視頻ID動態化的快速方法。

var player; 
 

 
function onYouTubeIframeAPIReady(videoId) { 
 
    player = new YT.Player('video-placeholder', { 
 
     height: '1920', 
 
     width: '1080', 
 
     videoId: videoId, 
 
     playerVars: { 
 
      modestbranding: 1, 
 
      rel: 0, 
 
     }, 
 
     events: { 
 
      'onReady': onPlayerReady 
 
     } 
 
    }); 
 
} 
 

 
document.getElementById('btn-video').addEventListener('click', function() { 
 
    var videoId = this.dataset.videoId; 
 
    onYouTubeIframeAPIReady(videoId); 
 
    document.getElementById('debug').innerHTML = videoID + ' has been submitted'; 
 
});

<button id="btn-video" data-video-id="GfCPFk8lyhM">Play</button> 
 

 
<span id="debug"></span>

來源

2017-08-04 20:18:38 Win

它似乎不起作用。我正在交換「價值（）;」爲「data-video-id（）;」因爲那是我的視頻ID在按鈕上的位置。我得到了一個「視頻未定義」的行。 – Brian

您需要將其交換到'document.getElementById（'ipt-video'）。dataset.videoId'，請參閱更新的示例。 – Win

直到點擊按鈕後，我才加載YouTube API腳本。是否有可能繼續做這項工作？ – Brian

你需要使用「loadVideoById」功能。
iFrame api具有您需要的所有功能。

HERE是您的鏈接。

這就是你應該使用的。

來源

2017-08-05 16:07:36 Tempus

如果直到點擊按鈕後才加載YouTube腳本，這項工作是否可行？ – Brian

YouTube IFrame API - 從data-video-id設置視頻ID

回答

相關問題