嵌入带有侧列表托盘的youtube播放列表

我一直在用javascript玩youtube嵌入播放列表功能

到目前为止，当我嵌入播放列表时，它看起来是这样的：

蓝色圆圈显示播放列表中的项目数，单击时显示缩略图

当视频开始播放时，需要单击播放列表按钮以显示列表，如下所示：

但我想让播放器像youtube页面上显示的那样显示，如下所示：

下面是我使用的代码：

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
        height: '390',
        width: '640',
        videoId: 'n2ISkJZC6DI',
        playerVars: {
                  listType:'playlist',
                  list: 'PL546E6163151751EE'
                },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
  }

  function onPlayerReady(){
    alert('player ready');
  }

  function onPlayerStateChange(){
    alert('player changed');
  }

</script>

//异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
//用and替换“ytplayer”元素
//YouTube播放器的API代码下载后。
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'ytplayer'{
高度：“390”，
宽度：“640”，
videoId:'n2ISkJZC6DI'，
playerVars：{
列表类型：'playlist'，
列表：“PL546E616351751EE”
},
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerReady（）{
警报（“玩家准备就绪”）；
}
函数onPlayerStateChange（）{
警报（“玩家改变”）；
}

它工作得很好！但我想知道是否有办法改变播放列表托盘的视图

---

非常感谢各位的帮助：）

您可以使用youtube嵌入式播放器的flash版本来实现这种外观。但是，托盘现在位于左侧

---

我想这会对你有所帮助：你可以看看Simone Gianni的原始代码或Cuttris所做的修改，这两个代码都可以在jsfiddle.net上找到，正如上面的URL所引用的。这是很久以前的事了，我所做的就是偷取youtube的css进行附带尝试，并使用API检索播放列表。。。蛋糕的和平：3我在哪里可以找到用于显示此列表的youtube css？我试图让嵌入式播放器像OP发布的最后一张图片一样显示，只需转到inspect元素，并搜索处理side try的youtube css文件。然后将此文件复制粘贴到您的文件中。这是一个肮脏的把戏，但它奏效了。如果有人发现某个最新版本的navigator不支持flash，可能会给我们带来麻烦。@AmineHADDAD不是说它不受支持，而是默认情况下它被禁用了，只需在需要时请求运行flash的权限。此外，出于上述原因，我建议不要使用此答案。如果没有其他方法，也没有其他方法，但只要有，就在flash IMO上使用它。（对这个答案的海报没有冒犯，这只是前进的方向：）