Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
How to Create a Responsive Video Slider in WordPress

How to Create a Responsive Video Slider in WordPress

by Courtney Robertson on July 7, 2016

Do you want to add a responsive video slider in WordPress? Sliders with videos make them even more engaging and interactive. In this tutorial, we will show you how to create a responsive video slider in WordPress.

Creating a Responsive WordPress Video Slider

First, you need to install and activate the Soliloquy Slider plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Upon activation, you need to visit Soliloquy » Add New and select a Native Slider. From here, Select Files from Other Sources.

Create a Responsive Video Slider in WordPress

This will open the Insert Media lightbox. Select the Insert Video Slide link from the left sidebar. Add the video URL.

If you are self-hosting, then you can upload the media files to this location or you can use videos hosted on Youtube, Vimeo, or Wistia as well.

If you are uploading videos directly to your web server, then you will also need to upload a fallback image to use while the video is not playing.

When you are done, click Insert into Slider in the lower right corner.

how to insert a video slider

After this, you can click Add another video slide if you want your slider to have additional video slides.

Next, close the lightbox and publish or update.

Configure Video Settings

Before you are done, we recommend you configure the dimensions of your slider in the Config tab to make sure it displays in the correct proportions.

For example, if your videos has aspect ratio of 4:3 or 16:9, then you’ll want to account for this when setting the dimensions of your slider.

Configure video slider dimensions

View Your Video Slider

Finally, it is time to add your slider to a post or page. Edit the post or page where you want to add the slider. Click on Add Slider button, and then select your video slider. 

publish responsive video slider

Click on Insert Slider button to add the slider into post or page. Don’t forget to click on publish or update button to save your changes.

Now you can visit your website to see your published video slider.

Published video slider

Try it yourself. To test an example video slider in action, here is one that we have created:

You’re all set. We hope this tutorial helped you create a responsive video slider in WordPress. You might also want to check out our article on how to add a slider with thumbnails in WordPress.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Courtney Robertson is a content writer for SoliloquyWP. She loves helping customers create the best WordPress sliders.

Comments

    Andrew

    July 7, 2016

    Adding a video slide from YouTube, as of August ’16, works about 50% of the time. Sometimes i add a video, and it posts flawlessly. Other times it doesn’t work. Following the instructions in this post, the URL seems to not save in the metadata… resulting in an error.

    Reply

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

[i]
[i]