使用侧列表托盘嵌入 youtube 播放列表 [英] Embed youtube playlist with side list tray

问题描述

我一直在使用 javascript 的 youtube 嵌入播放列表功能.

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

<iframe width='500' height='294' src="https://www.youtube.com/v/videoseries?list=PL546E6163151751EE"></iframe>

I've been playing with the youtube embed playlist functionality with javascript.

So far when I embed a playlist it looks like this:

http://postimage.org/image/vk6fv56yx/

The blue circle shows the number of items in the playlist and when clicked the thumbnails show.

when the video starts playing is necesary to click the playlist button for the list to show, like this:

http://postimage.org/image/ezzxpy7pn/

But I want the player to show like it shows on the youtube page, like this:

http://postimage.org/image/4suta8kuh/

now this is the code Im using:

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

It works great! but I wanted to know if there is a way to change the view of the playlist tray.

Thanks a lot for your help folks :)

解决方案

You can use the flash version of the youtube embed player to achieve that look. However the tray is now positioned to the left side.

<iframe width='500' height='294' src="https://www.youtube.com/v/videoseries?list=PL546E6163151751EE"></iframe>

这篇关于使用侧列表托盘嵌入 youtube 播放列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！