结合 2 个 YouTube API？

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