11

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

RicardoE
  • 1,665
  • 6
  • 24
  • 42
  • I think this will help you: http://tcuttrissweb.wordpress.com/2012/02/17/2012-embed-your-youtube-channel-into-your-website/ You can have a look at Simone Gianni's original code or the modifications Cuttriss made, both available on jsfiddle.net as referenced in the URL above. – user2041185 Jul 10 '13 at 15:55
  • this was a long time ago, what I did was to steal youtube's css for the side try, and use the API to retrieve the playlist... peace of cake :3 – RicardoE Jul 11 '13 at 21:58
  • where can i find the youtube css for displaying this list? – sQuijeW Aug 20 '13 at 16:56
  • i a trying to make the embedded player show up like the last picture the OP posted – sQuijeW Aug 20 '13 at 16:57
  • Simply go to the inspect elements, and search for the youtube's css files that handles the side try. then copy paste this file into one of yours. its a nasty trick but it works. maybe will get us in troubles if someone finds out xD – RicardoE Sep 19 '15 at 16:21
  • Flash is now deprecated by modern browsers. While the Playlist is still an option, it is not expanded by default (just an icon in the top-left corner). – JoePC Apr 25 '18 at 19:01

1 Answers1

0

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.

Youtube playlist flash player

<iframe width='500' height='294' src="https://www.youtube.com/v/videoseries?list=PL546E6163151751EE"></iframe>
Shan Eapen Koshy
  • 2,909
  • 1
  • 28
  • 40
  • Some last version of navigator don't support flash. – zatamine Jun 12 '16 at 09:59
  • 3
    @AmineHADDAD it's not that it's not supported, it's disabled by default and will simply ask for permission to run flash when needed. Furthermore I would suggest not using this answer for the above mentioned reason. If there is no other way there is no other way but as long as there is, use that over flash IMO. (No offense to the poster of this answer, it's just the way forward :)) – SidOfc Apr 03 '17 at 14:00