Kombinieren von 2 YouTube-APIs?

Question

Ich möchte das letzte Video eines YouTube-Kanals anzeigen und die Daten-API verwenden, um den Hintergrund beim Abspielen des Videos ändern zu können.

Aber ich verstehe die APIs noch nicht so gut und es ist mir gelungen, das letzte YouTube-Video von einem Kanal (iframe API) UND die Daten-API für den Hintergrund, aber nicht zusammen zu nehmen.

Wie kombiniert man sie?

Letztes Video von einem Kanalcode:

<iframe width="640" height="390" src="http://www.youtube.com/embed?max-results=1&controls=1&showinfo=0&listType=user_uploads&list=GoogleDevelopers" frameborder="0" allowfullscreen></iframe>

Fiddle für den Hintergrund mit YouTube Daten API zu ändern:

https://jsfiddle.net/LightBen/rjuph7jw/1/

Dank =)

Answer 1

Sie können die youtube-API auch auf dem vorhandenen iframe verwenden, was bedeutet, dass Sie den iframe wie in Ihrer Frage anzeigen können und die API-Funktionalität darauf hinzufügen.

Wie in diesem Code:

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; 
window.onYouTubeIframeAPIReady = function() { 
    player = new YT.Player('player', { 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
    } 
    }); 
} 

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

function onPlayerStateChange(event) { 
    switch(event.data) { 
    case 1: 
     $('body').addClass('play'); 
     break; 
    case 2: 
     $('body').removeClass('play'); 
    } 
} 

body { 
    margin: 0; 
    transition: background-color 0.2s; 
} 

.container { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
    background-color: #eee; 
    padding: 10rem 3rem; 
    transition: background-color 0.2s; 
    text-align: center; 
} 

body.play, .play .container { 
    background-color: #000; 
} 

iframe { 
    margin: 0 auto; 
} 

<div class="container"> 
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script> 
    <iframe id="player" width="640" height="390" src="http://www.youtube.com/embed?max-results=1&controls=1&showinfo=0&listType=user_uploads&list=GoogleDevelopers&enablejsapi=1" frameborder="0" allowfullscreen></iframe> 
</div> 

Sehen sie in Aktion: http://output.jsbin.com/fologu