YouTube IFrame API - データIDからビデオIDを設定

Question

誰かが自分のサイトのボタンをクリックすると、YouTubeのIFrame APIが読み込まれます。モーダルウィンドウに読み込まれます。このボタンでは、ビデオIDも「data-video-id」属性に設定しています。下記のようなAPIコードで動画IDを静的に宣言するのではなく、YouTube APIに動画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 
     } 
    }); 
} 

おかげで、 ブライアン

Answer 1

はそうのようなパラメータとして関数にそれを養います。私はAPIを使用していませんが、ビデオIDを動的にする方法の素早い方法があります。あなたが "loadVideoById" 機能を使用する必要が

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>

Answer 2

。
iFrame APIには、必要なすべての機能があります。

HEREはあなたのためのリンクです。

これは、使用する必要があります。