Embed Youtube Playlist mit Side List Tray

Question

Ich habe mit der Youtube Embed Playlist-Funktionalität mit Javascript gespielt.

Bisher wenn ich eine Playlist einbetten sieht es wie folgt aus:

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

Der blaue Kreis zeigt die Anzahl der Elemente in der Wiedergabeliste und wenn die Thumbnails zeigen geklickt.

, wenn das Video startet, ist spielen necesary die Playlist Schaltfläche klicken, um die Liste so zu zeigen,:

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

Aber ich möchte, dass die Spieler zu zeigen, wie es auf der Seite youtube zeigt, wie dies:

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

jetzt ist dies der Code Im mit:

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

Es funktioniert super! aber ich wollte wissen, ob es eine Möglichkeit gibt, die Ansicht des Playlist-Trays zu ändern.

Vielen Dank für Ihre Hilfe Leute :)

Answer 1

Sie die Flash-Version des youtube veröffentlichen Player einbinden, die aussehen zu erreichen nutzen können. Das Fach ist jetzt jedoch auf der linken Seite positioniert.

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