800,000+ WordPress sites are already using MetaSlider!

How to Create a YouTube Video Slideshow in WordPress

When people think of slideshows, the first thing that comes to mind is normally images. People think of slideshows as useful tools to show their images in the best possible display.

However, with MetaSlider it is possible to display more than just images. For example, you can also display your posts, and even YouTube and Vimeo videos.

In this guide, I’ll show you how to make a slideshow of YouTube videos using MetaSlider Pro.

Create Your YouTube Slideshow

Start following this guide with the MetaSlider Pro plugin installed.

  • Go to “MetaSlider Pro” in your WordPress admin area.
  • Edit an existing slideshow, or start a new slideshow.
  • Click the “Add Slide” button in the top toolbar.
Click to add a new YouTube video slide
  • You’ll see several choices in the left menu. Click “YouTube”.
  • Enter the URL of the YouTube video you want to include in the slideshow.
  • Click the “Add to slideshow” button in the bottom-right corner.
Creating a new YouTube video slide
  • You will now see a YouTube video slide in the main part the screen. There will be a thumbnail of the video, plus different settings you can change. We’ll cover those later in this guide.
A new YouTube video slide inside MetaSlider
  • Repeat this process to add more videos. Click “Add Slide” again and add more YouTube videos. In the image below, I’ve added three videos. All of the videos are introductions to MetaSlider.
Several YouTube video slide inside MetaSlider

Now you’re ready to publish your slideshow on your site. When you’re ready, you can add MetaSlider to a post, page, or your site layout. MetaSlider works great with the Gutenberg editor and all leading page builders. In this next image, I’m adding my slideshow as a Gutenberg block. Search for the “Metaslider” block when adding a new block.

Adding a MetaSlider button to the Gutenberg editor
  • You will now be asked to choose your video slideshow from a dropdown list:
Choosing your MetaSlider slideshow for a Gutenberg block
  • You will be able to see a live preview of your slideshow on your post editing screen:
A preview of a YouTube video slideshow in a Gutenberg block
  • Save your post and make it live on your site. You will be able to see all three videos in a slideshow. There will be “Previous” and “Next” buttons to cycle through the videos.
A YouTube video slideshow live on your WordPress site

Customizing Your YouTube Slideshow

Each video will have several options that you can set individually for each video. These settings are shown in the image below:

  • Show related videos: This controls what users see when they finish watching each video. YouTube’s default option is to show related videos.
  • Enable controls: This decides whether users will see options such as the rewind or close caption buttons on the video.
  • Lazy load video: This option can load videos only when users are watching that particular slide, and it may help make your videos faster.
  • Mute video on start: This will disable the sound by default on the video.
  • Auto play video: This starts the video automatically when users visit the slide.

Metaslider has four types of sliders, and two are available for YouTube videos. You can toggle between “Flexslider” or “R. Slides” to see which you prefer. If you try to choose “Nivo Slider” or “Coin Slider”, you’ll see a message saying that slider option is only compatible with Image and Post Feed slides.

However, both “Flexslider” and “R. Slides” do have a lot of options that you can use to customize your sliders. You can see many of those options in the image below:

Flexslider options for a video slideshow

In this image below, I’m using Flexslider and have checked the “Thumbnails” option. Instead of clicking on “Previous” and “Next” to choose another video, users can now click on a thumbnail of the next video.

Flexslider video slideshow with thumbnails in WordPress

Another approach is to create a carousel version of your video slideshow. There are two key steps to this:

  • For the “Width”, choose a width that is smaller than the space on your site where you will display the slideshow.
  • Click the “Advanced Settings” box and then check the “Carousel Mode” box.
Settings for a YouTube video carousel slideshow in WordPress

You can now visit your video slideshow, and you’ll be able to see multiple videos on the screen at the same time. Users will still be able to click the previous and next arrows to navigate between the videos.

Video carousel slideshow in WordPress

Leave a Comment

Start Using Your Slider Today!

Create and publish WordPress slideshows in minutes… What are you waiting for?