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.

Safiye Duman

emarket-design

WordPress YouTube Video Gallery Plugin
<a href="https://emdplugins.com/youtube-showcase/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">YouTube Showcase</a> is the easiest way to create responsive YouTube video galleries in WordPress. Whether you’re a content creator, blogger, marketer, or agency, this plugin helps you display YouTube videos, playlists, or entire channels in beautiful grid or gallery formats.
Use it to: 
– Showcase your own YouTube content 
– Create curated video galleries 
– Display playlists or YouTube channels on any page or post 
– Engage visitors with responsive video layouts and lightbox popups
Please watch the introduction video to get started.
<blockquote>
LIVE DEMO SITE 
 <a href="https://ytshowcasecom.emdplugins.com?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">YouTube Showcase Starter Demo Site</a> 
 Powerful | Easy to use | Beautiful
</blockquote>
<a href="http://www.wpbeginner.com/plugins/x-best-youtube-video-gallery-plugins-for-wordpress/" rel="nofollow ugc">Mentioned in WPBeginner’s Best YouTube Video Gallery Plugins</a>
Get started with YouTube Showcase
<iframe loading="lazy" title="Display your YouTube videos in WordPress instantly" width="750" height="422" src="https://www.youtube.com/embed/8MtOJaKQZKQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Details
Each YouTube video resides on its own page with WordPress comments enabled. YouTube video pages are automatically created when you insert the YouTube VIDEO ID on the video page.
YouTube Video ID is a 11 character string that YouTube uses to uniquely identify each video. For example, the video at https://www.youtube.com/watch?v=9K4uBRkFJEU has the id 9K4uBRkFJEU.
Using video thumbnail quality option for videos, you can change the dimensions of thumbnails offered by YouTube. For example, you can use an image 4:3 ratio instead of default 16:9. However, you should stick to this ratio for all videos.
After you install our plugin you will see our setup assistant which creates all the required pages, ready to use.
Two YouTube Video Gallery pages are provided:
<ul>
<li>YouTube Video Gallery</li>
<li>YouTube Video Grid Gallery</li>
</ul>
YouTube Video Gallery
<ul>
<li>Displays YouTube video thumbnail navigation at the bottom.</li>
<li>YouTube Videos are paged after every 8th video. Page navigation is available. You can adjust the number of YouTube videos shown with a shortcode.</li>
<li>For phones, thumbnail navigation is replaced with two large size PREV and NEXT icons.</li>
<li>YouTube videos are ordered by the latest video first</li>
</ul>
YouTube Video Grid Gallery
Displays high resolution YouTube video thumbnails in a 4 column responsive layout. YouTube Videos are paged after every 16th video.
You can build your YouTube video galleries by adding the VIDEO ID for the videos you’d like. You can add Content and Excerpt for every YouTube video. The YouTube video CONTENT text is displayed in the video page. The video EXCERPT is displayed in YouTube Video Gallery page, right below the main video.
All YouTube video pages are responsive and adjusts to the container so you do not need to give height or width.
Comes with two sidebar widgets:
<ul>
<li>Featured YouTube Videos</li>
<li>Recent YouTube Videos</li>
</ul>
Shortcode Examples
Note: In examples, yoyoma is the slug not the label of tag or category
<ul>
<li>Display 5 YouTube videos per page. If you have more than 5 videos, it will display a page navigation bar:</li>
</ul>
[video_grid filter=”misc::posts_per_page::is::5;”]
[video_gallery filter=”misc::posts_per_page::is::5;”]
<ul>
<li>Display YouTube videos with category “yoyoma”</li>
</ul>
[video_grid filter=”tax::category::is::yoyoma;”]
[video_gallery filter=”tax::category::is::yoyoma;”]
<ul>
<li>Display YouTube videos with tag “yoyoma”.</li>
</ul>
[video_grid filter=”tax::post_tag::is::yoyoma;”]
[video_gallery filter=”tax::post_tag::is::yoyoma;”]
RELATED PLUGINS YOU MAY LIKE
<ul>
<li><a href="https://wpeasyeventscom.emdplugins.com" rel="nofollow ugc">WP Easy Events Starter</a> Perfect event management and ticketing software for your business.</li>
<li><a href="https://wpeasycontactcom.emdplugins.com" rel="nofollow ugc">WP Easy Contact Starter</a> Complete contact management solution to start, develop and grow your customer relationships.</li>
<li><a href="https://kcentercom.emdplugins.com/" rel="nofollow ugc">Knowledge Center Starter</a> Great knowledge base software for helping your customers and employees to find answers faster.</li>
<li><a href="https://wpticketcom.emdplugins.com/" rel="nofollow ugc">WP Ticket Starter</a> Powerful customer support and helpdesk ticketing system.</li>
<li><a href="https://requestaquote.emdplugins.com/" rel="nofollow ugc">Request a quote Starter</a> Easy to Use Sales Quoting software for WordPress.</li>
</ul>
Video Gallery and Management for YouTube videos and WordPress
<ul>
<li><a href="https://emdplugins.com/youtube-showcase-beautiful-video-pages/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Create Stunning Video Experiences</a></li>
<li><a href="https://emdplugins.com/youtube-showcase-video-gallery/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Create Stunning Video Galleries with YouTube Showcase</a></li>
<li><a href="https://emdplugins.com/youtube-showcase-all-your-videos-in-one-place/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Centralized Management, Secure Storage</a></li>
<li><a href="https://emdplugins.com/youtube-showcase-categorize-and-tag-videos/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Intuitive Video Categorization And Tagging</a></li>
<li><a href="https://emdplugins.com/youtube-showcase-easy-to-use-widgets/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Easy To Use Widgets</a></li>
<li><a href="https://emdplugins.com/youtube-showcase-responsive-mobile-friendly/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Mobile-Ready Video Showcase</a></li>
<li><a href="https://emdplugins.com/youtube-showcase-get-videos-instantly/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Add captivating videos to your website in seconds</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-let-video-managers-do-more/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Non-Tech Friendly Video Management</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-display-playlists-and-more/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Enhance Your Website with Dynamic Video Integration Using YouTube Showcase</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-assign-roles-to-your-team/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Elevate your team’s capabilities through designated roles.</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-drag-drop-ordering/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Customize Your Video Display Order with Drag-and-Drop interface</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-relate-your-videos-to-each-other/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Establish Connections Between Your Videos</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-video-statistics/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Gain a deeper understanding of your audience</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-customize-your-videos/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Design Freedom: Customize Videos & Galleries to Match Your Website</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-custom-video-comments/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Foster a Community with Custom Video Comments</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-create-custom-video-galleries/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Easily Build Engaging, custom Video Galleries</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-tailor-video-layouts-to-match-your-vision/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Choose from Multiple Views with YouTube Showcase.</a> – Premium feature (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-smart-search-and-columns-addon/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Effortlessly find specific videos</a> – Add-on (included in Pro)</li>
<li><a href="https://emdplugins.com/youtube-showcase-import-export-addon/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">Optimize Video Management: YouTube Showcase Import/Export Addon</a> – Add-on (included in Pro)</li>
</ul>
PLUGIN LINKS 
* <a href="https://ytshowcasecom.emdplugins.com?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">YouTube Showcase Starter Demo Site</a> 
* <a href="https://docs.emdplugins.com/youtube-showcase-community/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">YouTube Showcase Starter Documentation</a> 
* <a href="https://ytshowcase.emdplugins.com/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">YouTube Showcase Professional Demo Site</a> 
* <a href="https://docs.emdplugins.com/youtube-showcase-professional/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">YouTube Showcase Professional Documentation</a> 
* <a href="https://emdplugins.com/articles/yt-scase-pro-wordpress-plugin-changelog/?pk_campaign=youtube-showcase-com&pk_kwd=readme" rel="nofollow ugc">YouTube Showcase Professional Changes</a>
<blockquote>
This plugin’s code was generated by <a href="https://wpappstudio.com" rel="nofollow ugc">WP App Studio</a> Professional WordPress Design and Development Platform based on the plugin’s design. You can develop a plugin like YouTube Showcase using <a href="https://wpappstudio.com/quick-start/" rel="nofollow ugc">WP App Studio</a> plugin and sell its designs by <a href="https://wpappstudio.com/become-a-selldev-author/" rel="nofollow ugc">becoming a SellDev author</a> 
</blockquote>

Responsive Video Gallery & Management for YouTube

Create a responsive YouTube video gallery, playlist, or channel grid in WordPress with thumbnails, lightbox, and shortcode support.

Youtube Playlist Thumbs vs Responsive Video Gallery & Management for YouTube