jsphstls

<p><a href="http://codepen.io/jsphstls/full/aOOqzg" rel="nofollow ugc">Demo</a></p>
<p>Install and activate the plugin. Insert the [ypt playlist_id=] shortcode in your page or post and insert your playlist ID after the equal. When that content is published and viewed, a Youtube player will appear and a column of thumbnails will load to the right of the player. Clicking the thumbnails switches between videos.</p>
<p>This plugin includes a small CSS file for minimal styling that was written to target the specific IDs of the thumb list and player.</p>
<p>Youtube Playlist Thumbs plugin depends on the Youtube Iframe API. Any bugs experienced with that service will affect this plugin. Please check for bugs with Youtube Iframe API before reporting a bug for this plugin.</p>
<p>See “Other Notes” for usage.</p>
<h3>Usage</h3>
<p>Place this shortcode in your posts or pages and insert your Youtube Playlist ID after the equal.</p>
<pre><code>[ypt playlist_id=]
</code></pre>
<p>To get a Youtube Playlist ID, copy the string after ‘&list=’ when viewing a playlist on Youtube.com. See screenshot #3.</p>
<p>To trigger the playback of an ordered video in the playlist, add this attribute to the clickable element:</p>
<pre><code>data-ypt-index="X"
</code></pre>
<p>Where ‘X’ is the order number of the video with the first video starting at 0. The <strong>third video would be 2</strong>. For example:</p>
<pre><code><button data-ypt-index="2">Click to play the third video.</button>
</code></pre>
<p>The ‘Now Playing’ thumbnail text and arrow is inserted by CSS. Add this rule to your CSS to change it:</p>
<pre><code>#ypt_thumbs .ypt-now-playing > span::after {
  content: "YOUR NEW TEXT" !important;
}
</code></pre>
<p>The height of the list of thumbnails is set by Javascript. It is first set when the player is ready and it adjusts when the window changes size. If you are using modals or any dynamic method to show/hide the player, you will need to trigger this function when the player is shown:</p>
<pre><code>yptThumbHeight();
</code></pre>
<p>For example, with Bootstrap modals:</p>
<pre><code>$('#videoModal').on('shown.bs.modal', function (e) { //modal shows
     yptThumbHeight(); //update the thumb height
});
</code></pre>
<p>A Javascript event triggers at the end of a playlist. It can used to trigger other events:</p>
<pre><code>jQuery(document).on('playlistEnd', function () { //playlist finished last video
    alert("That's all, thanks for watching!"); //do something
});
</code></pre>


Youtube Playlist Thumbs

Use the [ypt playlist_id=] shortcode to show a Youtube playlist with side thumbnails. Playlist videos can be triggered by links in page content.

grosbouff

<p><em>WP SoundSystem</em> is a complete solution to manage music in WordPress.</p>
<p>Import, create and manage tracklists, play tracks, connect to popular music services, and more !</p>
<p><a href="https://www.spiff-radio.org/" rel="nofollow ugc">See it working on Spiff Radio</a></p>
<p>Unlike most plugins, WP SoundSystem is <em>not</em> embedding third-party widgets in WordPress.<br />
It goes <em>further</em> by using its own <strong>customizable player</strong> : no brands, no logos, but <strong>your own data & design</strong> !</p>
<p>Playing tracks does not rely on a single service, since multiple links can be associated to a track (Youtube, Soundcloud, Spotify, audio files, anything!).</p>
<h4>Tracklists</h4>
<p>We have two types of tracklists : Playlists, and Radios.</p>
<h4>But what the hell are Radios ?</h4>
<p>Unlike Playlists, you cannot add, remove or reorder the tracks of a Radio : it is synced with an external URL, and updates seamlessly after a user-defined delay.  This is something very specific to this plugin.</p>
<p><a href="http://spiff-radio.org/?post_type=wpsstm_radio&tag=editors-pick&author=1" rel="nofollow ugc">Check some Radios on Spiff Radio</a></p>
<p>For example, a Radio might be</p>
<ul>
<li>Synced to a station website “now playing” page, cached for only 15 minutes since it is updated constantly on the remote side.</li>
<li>Synced to a Spotify playlist, cached for 1 day (or more) since there is only a few chances that its author might have updated it.</li>
</ul>
<p>A Radio synced with a Spotify playlist of yours would bring an always up-to-date playlist to your visitors, without having to update your website.</p>
<p>You can also create a Radio to fetch a tracklist you like, then convert it to a (static) Playlist so you have a backup of it.</p>
<p>Any tracklists can be exported to the standard <a href="http://xspf.org/" rel="nofollow ugc">XSPF</a> file format.</p>
<h4>Tracks</h4>
<p>Tracks can be favorited and shared by your users frontend, or added to a new playlist on-the-fly.<br />
Backend, you can query details from music services like <a href="https://musicbrainz.org/" rel="nofollow ugc">MusicBrainz</a> (The Open Music Encyclopedia) or Spotify.</p>
<h4>Tracks Links</h4>
<p>You can attach a bunch of links to any track; including links that can stream audio (Youtube, Soundcloud, audio files…) directly to our player!</p>
<h4>Autolink (requires an API key)</h4>
<p>If you don’t attach links to your track manually, you can enable our <em>autolink</em> module.<br />
It will search for remote links and attach them to your tracks automatically.</p>
<h4>Tracklist Importer</h4>
<p>Import <a href="http://xspf.org/" rel="nofollow ugc">XSPF playlists</a> using the <em>Tracklist Importer</em>.</p>
<p>If you have an <a href="https://github.com/gordielachance/wp-soundsystem/wiki/SoundSystem-API" rel="nofollow ugc">API key</a>, you could also import playlists from various services: <em>Last.fm, Spotify, SoundCloud, Deezer, Musicbrainz, Radionomy, Hypem, 8tracks, BBC, indieshuffle, Online Radio Box, radio.fr, RadioKing, Reddit, SomaFM, Soundsgood,…</em></p>
<p>Custom setups are also available, if you are somewhat familiar with <a href="https://www.w3schools.com/cssref/css_selectors.asp" rel="nofollow ugc">CSS selectors</a>.</p>
<p><a href="https://www.spiff-radio.org/?p=213" rel="nofollow ugc">Frontend Importer on Spiff Radio</a></p>
<h4>Player</h4>
<p>Our player uses of the <a href="https://www.mediaelementjs.com" rel="nofollow ugc">MediaElement.js</a> library, which is native in WordPress. It supports audio (& video) files, but also links from various services like Youtube or Soundcloud.<br />
It has been extended with various features built on top of it, like a tracks queue or a Last.fm scrobbler.<br />
You can customize the design of this player the way you like, and extend its functions.</p>
<h4>Social</h4>
<p><strong>Last.fm</strong><br />
In addition of being able to scrobble on <a href="https://www.last.fm/" rel="nofollow ugc">Last.fm</a>, every track favorited by a user connected to his account will also be loved on that service.</p>
<p><strong>BuddyPress</strong><br />
Users profiles will get a new music section that lists the user favorite tracks, tracklists, and the ones he created.<br />
It will also fire new <em>BuddyPress activity</em> items.</p>
<h4>Contribute</h4>
<p>WP SoundSystem is dev friendly, and has been designed to be extendable.<br />
Wanna give a hand as developer ? Check the <a href="https://github.com/gordielachance/wp-soundsystem" rel="nofollow ugc">Github</a> repo.</p>
<h4>SoundSystem API</h4>
<p>The <a href="https://github.com/gordielachance/wp-soundsystem/wiki/SoundSystem-API" rel="nofollow ugc">SoundSystem API</a> has been developed in Ruby in parallel of this plugin.<br />
Get extra features by registering an API key !</p>
<p>Some of its feature are:</p>
<ul>
<li>Playlist import from a lot of music services</li>
<li>the Autolink module, which will get audio sources for your tracks automatically.</li>
</ul>
<p>Those are optionals, but are nice features to a solid plugin.<br />
Consider getting one as a nice way to support the work done –hundred of hours– , and to ensure its durability.</p>
<p>Since the API is independent of the plugin, it might also be used by other developers.</p>
<p>More informations <a href="https://github.com/gordielachance/wp-soundsystem/wiki/SoundSystem-API" rel="nofollow ugc">here</a>.</p>
<h4>Donate</h4>
<p>Whatever, if you like this plugin, please also consider <a href="https://www.spiff-radio.org/?p=287871" rel="nofollow ugc">making a donation</a>.</p>
<p>This would be very appreciated — Thanks !</p>
<h4>Dependencies</h4>
<ul>
<li><a href="https://github.com/matt-oakes/PHP-Last.fm-API" rel="nofollow ugc">PHP Last.fm API</a> – Last.fm scrobbling</li>
<li><a href="https://github.com/abodelot/jquery.json-viewer" rel="nofollow ugc">jQuery json-viewer</a> – jQuery plugin for displaying JSON data</li>
</ul>
<h4>Contributors</h4>
<p>Contributors <a href="https://github.com/gordielachance/wp-soundsystem/contributors" rel="nofollow ugc">are listed here</a></p>
<h4>Bugs/Development</h4>
<p>For feature request and bug reports, please use the <a href="https://github.com/gordielachance/wp-soundsystem/issues" rel="nofollow ugc">Github Issues Tracker</a>.</p>
<p>If you are a plugin developer, <a href="https://github.com/gordielachance/wp-soundsystem" rel="nofollow ugc">we would like to hear from you</a>. Any contribution would be very welcome.</p>
<h3>Localization</h3>


WP SoundSystem

WP SoundSystem is a complete solution to manage music in WordPress.  Import, create and manage tracklists, play tracks, connect to popular music servi …

Youtube Playlist Thumbs vs WP SoundSystem