Blessing Fasina

<p>GeniusTray Video Playlist for YouTube lets you showcase YouTube videos in a beautiful, interactive playlist format on your WordPress site. Whether you want to curate your own collection of videos or automatically display content from a YouTube channel, this plugin makes it simple.</p>
<p>The player interface mimics the familiar YouTube playlist experience – a main video player alongside a scrollable list of videos. Visitors can easily browse and switch between videos without leaving your page.</p>
<h4>Two Ways to Create Playlists</h4>
<p><strong>Manual Playlists</strong><br />
Create custom playlists by adding YouTube video URLs one by one. Perfect for curated content, course materials, product demonstrations, or any collection where you want complete control over video selection and order.</p>
<p><strong>Channel Playlists</strong><br />
Automatically pull recent videos from any YouTube channel using the YouTube Data API. Great for displaying your own channel content or featuring videos from creators you want to highlight.</p>
<h4>Built for Performance</h4>
<ul>
<li>Assets only load on pages where playlists are displayed</li>
<li>API responses are cached to minimize external requests</li>
<li>Responsive design adapts to any screen size</li>
<li>Clean, semantic HTML output</li>
</ul>
<h4>Developer Friendly</h4>
<ul>
<li>Object-oriented architecture</li>
<li>Hooks and filters for customization</li>
<li>Pluggable helper functions</li>
<li>Full internationalization support</li>
</ul>
<h3>Features</h3>
<ul>
<li><strong>Custom Post Type</strong> – Manage playlists from a dedicated admin interface</li>
<li><strong>Drag & Drop Ordering</strong> – Easily reorder videos in your playlists</li>
<li><strong>Shortcode Support</strong> – Place playlists anywhere with simple shortcodes</li>
<li><strong>Channel Integration</strong> – Import videos directly from YouTube channels</li>
<li><strong>Video Duration Display</strong> – Show video lengths in the playlist (requires API key)</li>
<li><strong>Customizable Dimensions</strong> – Set default or per-playlist width and height</li>
<li><strong>Autoplay Option</strong> – Automatically start playing when the page loads</li>
<li><strong>Dark Theme Design</strong> – Modern, YouTube-inspired visual style</li>
<li><strong>Keyboard Navigation</strong> – Full accessibility with keyboard controls</li>
<li><strong>Mobile Responsive</strong> – Stacked layout on smaller screens</li>
<li><strong>Translation Ready</strong> – All strings prepared for localization</li>
</ul>
<h3>External services</h3>
<p>This plugin relies on third-party services provided by Google (YouTube) to deliver its core functionality. Below is a detailed explanation of each service used, what data is transmitted, when it is transmitted, and links to the relevant terms and policies.</p>
<h4>YouTube Data API v3</h4>
<p>This plugin connects to the YouTube Data API v3 (<code>https://www.googleapis.com/youtube/v3</code>) to retrieve video and channel information from YouTube.</p>
<p><strong>What data is sent:</strong> Your YouTube API key (configured in the plugin settings), YouTube video IDs, and YouTube channel IDs are sent to Google’s servers.</p>
<p><strong>When data is sent:</strong><br />
* When an admin adds a video URL in the playlist editor and the plugin fetches the video title and details via AJAX.<br />
* When a page containing a channel playlist shortcode (<code>[vidtray_channel]</code>) is viewed by a visitor, and the cached data has expired (cache duration is 6 hours).<br />
* When video duration display is enabled and a page containing a playlist shortcode is viewed by a visitor, and the cached duration data has expired.<br />
* When the admin validates the API key in the plugin settings.</p>
<p><strong>This service is only used when a YouTube API key has been configured in the plugin settings.</strong> Without an API key, no requests are made to this service.</p>
<ul>
<li>Service provider: Google LLC</li>
<li><a href="https://www.youtube.com/t/terms" rel="nofollow ugc">YouTube Terms of Service</a></li>
<li><a href="https://policies.google.com/privacy" rel="nofollow ugc">Google Privacy Policy</a></li>
<li><a href="https://developers.google.com/youtube/terms/api-services-terms-of-service" rel="nofollow ugc">YouTube API Services Terms of Service</a></li>
</ul>
<h4>YouTube Video Embeds</h4>
<p>This plugin embeds YouTube videos on your site using iframes that load content from YouTube’s servers (<code>https://www.youtube.com/embed/</code>).</p>
<p><strong>What data is sent:</strong> When a visitor views a page containing a playlist, their browser makes a direct connection to YouTube’s servers to load the embedded video player. This may include the visitor’s IP address, browser information, and cookies. YouTube may set cookies on the visitor’s browser.</p>
<p><strong>When data is sent:</strong> Every time a visitor views a page that contains a playlist shortcode (<code>[vidtray_playlist]</code> or <code>[vidtray_channel]</code>).</p>
<ul>
<li>Service provider: Google LLC</li>
<li><a href="https://www.youtube.com/t/terms" rel="nofollow ugc">YouTube Terms of Service</a></li>
<li><a href="https://policies.google.com/privacy" rel="nofollow ugc">Google Privacy Policy</a></li>
</ul>
<h4>YouTube Thumbnail Images</h4>
<p>This plugin loads video thumbnail images from YouTube’s image servers (<code>https://img.youtube.com/vi/</code>).</p>
<p><strong>What data is sent:</strong> When a visitor views a page containing a playlist, their browser makes a direct connection to YouTube’s image servers to load the video thumbnails. This may include the visitor’s IP address and browser information.</p>
<p><strong>When data is sent:</strong> Every time a visitor views a page that contains a playlist shortcode.</p>
<ul>
<li>Service provider: Google LLC</li>
<li><a href="https://www.youtube.com/t/terms" rel="nofollow ugc">YouTube Terms of Service</a></li>
<li><a href="https://policies.google.com/privacy" rel="nofollow ugc">Google Privacy Policy</a></li>
</ul>
<h3>Additional Information</h3>
<h4>Minimum Requirements</h4>
<ul>
<li>WordPress 5.8 or higher</li>
<li>PHP 7.4 or higher</li>
<li>Modern web browser with JavaScript enabled</li>
</ul>
<h4>Recommended</h4>
<ul>
<li>YouTube Data API v3 key for full functionality</li>
<li>PHP 8.0 or higher for best performance</li>
</ul>
<h4>Support</h4>
<p>For support questions, please use the WordPress.org support forum. For bug reports and feature requests, you can also reach us at our website.</p>
<h4>Contributing</h4>
<p>We welcome contributions! The plugin is developed following WordPress coding standards. If you would like to contribute, please get in touch.</p>


GeniusTray Video Playlist for YouTube

Create beautiful YouTube video playlists with an interactive player. Build custom playlists or import from channels.

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.

GeniusTray Video Playlist for YouTube vs Youtube Playlist Thumbs