YouTube IFrame-API - Video-ID aus Daten-Video-ID setzen

Question

Ich lade die IFrame-API von YouTube, nachdem jemand auf meine Website geklickt hat. Es lädt in einem modalen Fenster. Auf dieser Schaltfläche habe ich auch die Video-ID in einem "Data-Video-ID" -Attribut. Gibt es eine Möglichkeit, die Video-ID dynamisch in die YouTube-API zu laden, anstatt die Video-ID wie unten im API-Code zu deklarieren?

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 
     } 
    }); 
} 

Danke, Brian

Answer 1

es in die Funktion wie so als Parameter-Feed. Ich habe die API nicht verwendet, aber hier ist ein kurzer Weg, um die Video-ID dynamisch zu gestalten.

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

Sie müssen die "loadVideoById" Funktion verwenden.
Der iFrame api hat alle Funktionen, die Sie benötigen.

HERE ist der Link für Sie.

Dies ist, was Sie verwenden sollten.