Question

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

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

如何组合它们？

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

＆＃13;

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

＆＃13;

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

合并2个YouTube API？

1 个答案: