Adding A Video Playlist To Elementor

Published: July 27, 2020

If you create video content and have a website built with Elementor, chances are you're looking for an easy way to display YouTube video playlists directly on your site. This is a great way to boost your YouTube channel while making your website attractive from a content and SEO standpoint.


Unfortunately, there aren't many ways to add a video playlist to Elementor (that are well known about). many of the plugins available on the WordPress repository are poorly designed, no longer maintained, and have dated code.

YouTube does come with a built in embed code which allows you to place a video series in your website, but unfortunately there's no “playlist functionality” front and center. Instead, you need to click on the playlist icon in the upper right corner. Other than that icon, the video embedded on your Elementor website looks exactly like a single YouTube video.

That's definitely not what you want if you have a well seasoned portfolio of videos to display as a playlist in your Elementor website. This YouTube video embed also doesn't work well with Elementor. Essentially, it's an iframe which you can easily add to the HTML Elementor element, but there's no native way to change the styling, sizing, or anything else from directly within the editor.

A better option is using a Google API key to correctly get data for YouTube videos, but that requires some coding and technical know how.

The solution to all of these issues comes in the form of the video playlist Element that ships with Crocoblock’s JetBlog plugin. With it, adding a video playlist to an Elementor website is super easy, and native. JetBlog Comes in at $19.00 per year for a single site and offers a lot more than just video embeds.

Video Playlist widget items adding

Not only can you simply drag and drop the video playlist into the Elementor canvas, but you can set up the styling and settings from directly within the editor interface (Just how you would with any other element). that way, if you're looking for an easy and simple way to customize your video playlist to match the branding of your company and website, Jet Blog lets you do that very easily.

Let's take a look at the general element, and explore the content and styling options that come with it. You'll see that it's the Best option for embedding YouTube video playlists into an Elementor site.

From the editor, search for the video playlist and drag it into a column or section on the Elementor website. The first thing you need to do is set your Google API. This is done from the back end of your WordPress website, and is used throughout all video playlists in Elementor.

Then, add your videos to the playlist by inserting the URL addresses from YouTube. This allows you to create a collection of multiple YouTube videos, all of which don't need to be in a playlist on YouTube (though they could). this offers you the flexibility of choosing any video from YouTube instead of having to import specific playlists.

Then, you can set up your general settings like the playlist height, thumbnail orientation, thumbnail heading, heading icon, video counter, and more. The video playlist in Elementor is set up with the YouTube video on the left side, and the playlist navigation on the right side. From the navigation, you can see which video is currently playing, and choose from the remaining videos.

you can also style it to match the branding of your website. This includes setting up the canvas background, thumbnails background, heading background, padding, margin, thumbnail styling, typography, hover states, and more.

General Styles in Video Playlist widget

There are even options to set up the scrollbar track color and scrollbar thumb color (all from the native Elementor editor interface, of course).

If you're looking for a quick, easy, and cheap way too add video playlists to an Elementor website, this is your best option. It's modern, up-to-date, and integrates directly with Elementor. There's also a ton of value that comes with the overarching JetBlog Plugin -- For only $19.00 you get access to tons of widgets that help you display content, increase readership, and lower bounce rate. You can also opt to get all of the plugins for only $80.00 per year, that includes six of the industry-leading plugins for extending Elementor.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Notify of
1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
3 months ago

Super module, on the other hand it adds in the URL of the page a code of the type "? Playlist = 9f0c36d & video = 7a1b82b". Is there an option to not see this link? Thanking you for the solution 😉

IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.


A relationship driven website creation company.


© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram