Youtube Playlist Thumbs

Youtube Playlist Thumbs

Wordpress plugin

Install on Wordpress

App Details

Demo

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.

Usage

Place this shortcode in your posts or pages and insert your Youtube Playlist ID after the equal.

[ypt playlist_id=] 

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:

data-ypt-index="X" 

Where ‘X’ is the order number of the video with the first video starting at 0. The third video would be 2. For example:

<button data-ypt-index="2">Click to play the third video.</button> 

The ‘Now Playing’ thumbnail text and arrow is inserted by CSS. Add this rule to your CSS to change it:

#ypt_thumbs .ypt-now-playing > span::after { content: "YOUR NEW TEXT" !important; } 

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:

yptThumbHeight(); 

For example, with Bootstrap modals:

$('#videoModal').on('shown.bs.modal', function (e) { //modal shows yptThumbHeight(); //update the thumb height }); 

A Javascript event triggers at the end of a playlist. It can used to trigger other events:

jQuery(document).on('playlistEnd', function () { //playlist finished last video alert("That's all, thanks for watching!"); //do something }); 

Pricing

Starting from $0 per month.

Check Out the Linkedin Feed Widget

By Common Ninja

Linkedin FeedTry For Free!

App Info

Rating

Reviewers

12 reviews

Tags

iframe
playlist
thumbnails
video
youtube

Developed By

jsphstls

Quick & Easy

Find the Best Wordpress plugins for you

Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!

Testimonial

Testimonial plugins for Wordpress

Galleries

Galleries plugins for Wordpress

SEO

SEO plugins for Wordpress

Contact Form

Contact Form plugins for Wordpress

Forms

Forms plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Sliders

Sliders plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Comments

Comments plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Maps

Maps plugins for Wordpress

Security

Security plugins for Wordpress

Translation

Translation plugins for Wordpress

Ads

Ads plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Music Player

Music Player plugins for Wordpress

Backup

Backup plugins for Wordpress

Privacy

Privacy plugins for Wordpress

Optimize

Optimize plugins for Wordpress

Chat

Chat plugins for Wordpress

Countdown

Countdown plugins for Wordpress

Email Marketing

Email Marketing plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Membership

Membership plugins for Wordpress

popup

popup plugins for Wordpress

SiteMap

SiteMap plugins for Wordpress

Payment

Payment plugins for Wordpress

Coming Soon

Coming Soon plugins for Wordpress

Ecommerce

Ecommerce plugins for Wordpress

Customer Support

Customer Support plugins for Wordpress

Inventory

Inventory plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Testimonials

Testimonials plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Slider

Slider plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Membership

Membership plugins for Wordpress

Forms

Forms plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Contact

Contact plugins for Wordpress

Comments

Comments plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Common Ninja Apps

Some of the best Common Ninja plugins for Wordpress

Browse our extensive collection of compatible plugins, and easily embed them on any website, blog, online store, e-commerce platform, or site builder.

Linkedin Feed for Wordpress logo

Linkedin Feed

Show LinkedIn posts in a live feed that keeps updates current, builds credibility, and helps visitors engage with your brand.

WhatsApp Chat for Wordpress logo

WhatsApp Chat

Add WhatsApp Chat to your site to communicate with visitors, deliver instant support, and create a smoother, more trustworthy user experience.

Google Reviews for Wordpress logo

Google Reviews

Show verified customer feedback with Google Reviews to build trust, strengthen credibility, and help visitors make confident purchase decisions.

YouTube Carousel for Wordpress logo

YouTube Carousel

Show YouTube videos with a YouTube carousel that displays clips in a smooth, customizable layout to boost visibility and keep visitors engaged.

Section Builder for Wordpress logo

Section Builder

Create structured layouts with a section builder that lets you design custom website sections, customize styles, and organize content for a clearer user experience.

Google Maps for Wordpress logo

Google Maps

Show business locations clearly with a Google Maps widget that displays multiple points, detailed info, and customizable styles to help visitors find you easily.

Testimonials Slider for Wordpress logo

Testimonials Slider

Add a testimonials slider to your site to showcase real customer feedback, build credibility, and increase trust that leads to higher conversions.

Slideshow for Wordpress logo

Slideshow

Present images in a Slideshow carousel that rotates or slides through visuals, helping you highlight key content within a clean, engaging layout.

X Feed for Wordpress logo

X Feed

Show posts in an X feed that keeps updates visible, improves content discovery, and helps visitors stay engaged with your latest activity.

Strip Button for Wordpress logo

Strip Button

Add a Stripe Button to your website to give customers a fast, trusted checkout experience.

Job Application Form for Wordpress logo

Job Application Form

Collect candidate information with a job application form that organizes submissions, streamlines hiring, and helps you manage applicants efficiently.

Airbnb Reviews for Wordpress logo

Airbnb Reviews

Show Airbnb reviews to build trust, improve credibility, and help visitors make confident booking decisions that support higher property sales.

Discover Apps By Platform

Discover the best apps for your website

WordPress
Wix
Shopify
Weebly
Webflow
Joomla
PrestaShop
Shift4Shop
WebsiteX5
MODX
Opencart
NopCommerce

Common Ninja Search Engine

The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!

Multiple platforms