jsphstls

<a href="http://codepen.io/jsphstls/full/aOOqzg" rel="nofollow ugc">Demo</a>
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.
This plugin includes a small CSS file for minimal styling that was written to target the specific IDs of the thumb list and player.
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.
See “Other Notes” for usage.
<h3>Usage</h3>
Place this shortcode in your posts or pages and insert your Youtube Playlist ID after the equal.
<pre><code>[ypt playlist_id=]
</code></pre>
To get a Youtube Playlist ID, copy the string after ‘&list=’ when viewing a playlist on Youtube.com. See screenshot #3.
To trigger the playback of an ordered video in the playlist, add this attribute to the clickable element:
<pre><code>data-ypt-index="X"
</code></pre>
Where ‘X’ is the order number of the video with the first video starting at 0. The third video would be 2. For example:
<pre><code><button data-ypt-index="2">Click to play the third video.</button>
</code></pre>
The ‘Now Playing’ thumbnail text and arrow is inserted by CSS. Add this rule to your CSS to change it:
<pre><code>#ypt_thumbs .ypt-now-playing > span::after {
 content: "YOUR NEW TEXT" !important;
}
</code></pre>
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:
<pre><code>yptThumbHeight();
</code></pre>
For example, with Bootstrap modals:
<pre><code>$('#videoModal').on('shown.bs.modal', function (e) { //modal shows
 yptThumbHeight(); //update the thumb height
});
</code></pre>
A Javascript event triggers at the end of a playlist. It can used to trigger other events:
<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.

Brady Vercher

brodyvercher

AudioTheme

Luke McDonald

Cue makes it easy to create and manage beautiful, fully responsive audio playlists. Primarily built with music in mind, Cue can also be used for podcasts, sermons or to showcase voice over samples.
There’s no need to fiddle with XML, JSON, or FTP. Just upload audio files with the familiar WordPress Media Manager, then insert them into a playlist with the click of a button. Cue fetches metadata from uploaded files to automatically complete the title, artist, and length for each track.
It works on desktop, tablets, and other mobile devices.
View a working demo at <a href="https://audiotheme.com/view/cue/?utm_source=wordpress.org&utm_medium=link&utm_content=cue-readme-demo&utm_campaign=plugins" rel="nofollow ugc">https://audiotheme.com/view/cue/</a>.
<h3>Features</h3>
<ul>
<li>Create unlimited playlists.</li>
<li>Embed a player in any post, page, or sidebar using a shortcode or widget.</li>
<li>Reorder tracks with a simple drag and drop interface.</li>
<li>Seamlessly integrates with WordPress’ media manager to select audio and images.</li>
<li>Automatically fetches title, artist, and length from the metadata if it’s available.</li>
<li>Completely responsive to work on any device that supports your audio format.</li>
<li>Link to external sources like Amazon S3 or other CDNs.</li>
<li>Customize the player background image.</li>
<li>Use custom artwork for each track.</li>
</ul>
<blockquote>
Level up with Cue Pro
<a href="https://audiotheme.com/view/cuepro/?utm_source=wordpress.org&utm_medium=link&utm_content=cue-readme&utm_campaign=plugins" rel="nofollow ugc">Cue Pro</a> is a premium add-on with a number of useful features. It includes:
<ul>
<li>Insights into how visitors interact with your audio.</li>
<li>Purchase and download links for each track.</li>
<li>New themes to change the appearance of the player.</li>
<li>Playlist sharing to allow fans to embed your players on their own sites.</li>
<li>Popup functionality so visitors can continue listening while browsing your site.</li>
</ul>
Cue Pro purchases include email-based priority support and help support development of the free version of Cue.
</blockquote>
<h3>About AudioTheme</h3>
Cue is built by the team at <a href="https://audiotheme.com/?utm_source=wordpress.org&utm_medium=link&utm_content=cue-readme&utm_campaign=plugins" rel="nofollow ugc">AudioTheme</a>. We’re a small, independent team of designers, developers and musicians focused on creating and supporting professional, world-class WordPress themes and plugins for bands and musicians.
Cue was originally integrated in our commercial platform, but we wanted everyone to have the ability to easily create beautiful playlists, so we released it free for general use. It powers the unique players in all of our premium music themes, as well as <a href="https://audiotheme.com/view/cuebar/?utm_source=wordpress.org&utm_medium=link&utm_content=cue-readme&utm_campaign=plugins" rel="nofollow ugc">CueBar</a>, a site-wide, continuous audio player made for WordPress.
We care about our work and stand by it. We’d love to have your support and the opportunity to earn your loyalty.
<h3>Support Policy</h3>
We’ll do our best to keep this plugin up to date, fix bugs and implement features when possible, but technical support can only be provided for active AudioTheme customers. If you enjoy this plugin and would like to support its development, you can:
<ul>
<li><a href="https://audiotheme.com/?utm_source=wordpress.org&utm_medium=link&utm_content=cue-readme&utm_campaign=plugins" rel="nofollow ugc">Visit AudioTheme</a> and tell your friends!</li>
<li><a href="https://wordpress.org/support/view/plugin-reviews/cue#postform" rel="ugc">Leave a review</a> and let everyone know how much you love it.</li>
<li><a href="https://twitter.com/AudioTheme" rel="nofollow ugc">Follow @AudioTheme</a> on Twitter.</li>
<li>Help out on the <a href="https://wordpress.org/support/plugin/cue" rel="ugc">support forums</a>.</li>
<li><a href="https://github.com/audiotheme/cue" rel="nofollow ugc">Contribute on GitHub</a>.</li>
</ul>

Cue by AudioTheme.com

Great plugin for playing on-server audio files on your site!
And the authors of the plugin are very helpful!

Youtube Playlist Thumbs vs Cue by AudioTheme.com