Databases
StackOverflow2013
Postsdbo
POEmbed youtube playlist with side list tray
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEmbed youtube playlist with side list tray
    text
    copied!<p>I've been playing with the youtube embed playlist functionality with javascript.</p> <p>So far when I embed a playlist it looks like this:</p> <p><a href="http://postimage.org/image/vk6fv56yx/">http://postimage.org/image/vk6fv56yx/</a></p> <p>The blue circle shows the number of items in the playlist and when clicked the thumbnails show.</p> <p>when the video starts playing is necesary to click the playlist button for the list to show, like this:</p> <p><a href="http://postimage.org/image/ezzxpy7pn/">http://postimage.org/image/ezzxpy7pn/</a></p> <p>But I want the player to show like it shows on the youtube page, like this:</p> <p><a href="http://postimage.org/image/4suta8kuh/">http://postimage.org/image/4suta8kuh/</a></p> <p>now this is the code Im using:</p> <pre><code>&lt;script&gt; // 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 &lt;iframe&gt; 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'); } &lt;/script&gt; </code></pre> <p>It works great! but I wanted to know if there is a way to change the view of the playlist tray.</p> <p>Thanks a lot for your help folks :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload