isotropic-2022
Share
Blog
Search
Menu

Adding A Video Playlist To Elementor

By James LePage
 on July 27, 2020
Last modified on January 6th, 2022

Adding A Video Playlist To Elementor

By James LePage
 on July 27, 2020
Last modified on January 6th, 2022

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.

Source

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Pascal
3 years 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 😉

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram