Combining 2 YouTube APIs?

Question

我想显示YouTube频道的最后一个视频，并使用数据API在播放视频时更改背景。

但我还不太了解API，我成功地从一个频道（iframe API）获取了最后一个YouTube视频，并使用数据API作为背景，但不是一起使用。

如何组合它们？

来自频道代码的最后一个视频：

<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>

改变背景与YouTube数据的Fiddle API：

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

感谢=）

Answer 1

您也可以在现有iframe上使用youtube API，这意味着您可以显示问题中的iframe，并在其上添加API功能。

类似于此代码：

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>

在行动中看到它：http://output.jsbin.com/fologu