Adding Video Sliders to WordPress: The Easy Way

Video content is an essential addition to any site and plays a vital role in enhancing website engagement and user experience – 88% of marketers see video as essential to their overall strategy. And a dynamic, engaging way to add video content to your WordPress website is through video sliders. 

Video sliders help with diverse content needs and are a great choice for sites like travel blogs, educational websites, and ecommerce stores. Some of the benefits include:

• Visual appeal: Video sliders can enhance the visual appeal and storytelling of a website, making it more dynamic and engaging.
• User engagement: They can lead to an increase in the time spent on the page and user interaction by encouraging visitors to click through and watch multiple videos.
• Versatility: There are various uses of video sliders, such as showcasing featured content, tutorials, promotions, portfolios, or testimonials on landing pages (and more).
• Space efficiency: Video sliders help avoid clutter by displaying multiple pieces of content in a single space. This is a better solution than simply embedding videos on a page, as you have more control over how the videos are sized and displayed.
• SEO benefits: Optimizing video content for search engines with schema markup and metadata options enhances the discoverability of video content.

Considering all of these advantages, using a video slider is a must. In this article, we provide step-by-step instructions on how to create and customize a video slider in WordPress using the ideal plugin for the job, FooGallery PRO.

How to Add Video Sliders to WordPress With FooGallery PRO 

While you can use the built-in WordPress video player, it only offers basic functionality, and won’t allow you to create a video slider. You should instead consider using plugins for more advanced video management and display options.

FooGallery PRO is the best video gallery plugin for creating dynamic and engaging video sliders for WordPress users. It has a user-friendly interface and intuitive settings, which include customization options and advanced features that standard gallery plugins may lack. This, along with the comprehensive documentation, makes creating and managing galleries easy for everyone, even beginners.

Choose Your FooGallery Plan 

FooGallery comes in several different plans (each giving you progressively more features) to suit varying needs. To build video sliders, you’ll need at least the FooGallery PRO Expert plan, which includes the Slider PRO layout and video embedding capabilities. However, you may want to consider the PRO Commerce plan if you want to use the slider for ecommerce purposes.

You can now follow these steps to get set up:

• Purchase and download: Head over to the official FooPlugins website to purchase FooGallery PRO Expert (if you haven’t already done so).
  On the pricing page, you may see that FooGallery PRO Starter includes the Slider layout, but you’ll require FooGallery PRO Expert or Commerce for video support.
• Install: You can now install and activate the plugin.  

Common issues and troubleshooting: While problems with installing and using the plugin are rare, they can happen. But they can be resolved using guidance from the extensive documentation or with the Premium Support available for Pro users. 

Creating Your Video Sliders and Uploading Content 

You’re now ready to start creating your video sliders. Below is a step-by-step guide:

Create a new gallery: You’ll begin by creating a new gallery using FooGallery PRO. 

• Add a New Gallery: Click on Add Gallery under FooGallery in the WordPress dashboard. A new gallery page will open where you can title your gallery and choose the slider layout.

• Upload content: There are various ways to add content to your gallery. You can upload images or add them from the media library (with FooGallery you can display images and videos in the same gallery). You can then add videos to your gallery in one of two ways: from external platforms or local uploads.
• External videos: To embed videos from external platforms like YouTube, DailyMotion, and Vimeo, click on Add Media in your gallery. Go to the Import Video tab and paste the video URL copied from your video platform. Select the video and add it to your gallery. Adding your videos to a private channel first is best practice.

• Local uploads: You can also upload video files directly from your computer. The plugin currently supports .mp4, .ogv, .wmv, and .webm files. However, this is NOT recommended – uploading your own videos can add excessive bloat to your site! 
• Configure play settings: To configure your video settings, click on the video tab in your galley. Here you can select the video hover icon and choose whether to make this sticky. You can also choose the lightbox video size and set up autoplay options to enhance the video slider experience.

Adding a Gallery to a Page or Post 

Once you are happy with your gallery, you can click on publish. Your gallery won’t show anywhere until you add it to a page or post:

• Inserting the gallery: There are two ways to insert your video slider into a WordPress post or page. The first is to use the FooGallery block: search for FooGallery in the block editor, click on this, and then search through your galleries to find the video slider. Once you add this to your page, you will see a preview of the gallery. Alternatively, you can use the FooGallery shortcode; paste this into your page and the gallery will display on the frontend. 
• Review and edit: Once inserted, you can view and test the video slider to ensure it looks great and works as intended. It is best to do this in the page preview mode.

Customizing Your FooGallery PRO Video Sliders 

One of FooGallery’s strengths is the range of customizations and advanced options it offers compared to more basic plugins. 

‘Tailoring the look and feel of video sliders can significantly boost engagement and reinforce brand identity. Whether it’s tweaking colors, adjusting layouts, or fine-tuning functionality, these customizations allow you to create a video experience that truly reflects your business and resonates with your audience.’ Steve Usher, Lead developer at FooPlugins

Themes and Custom Colors

Step-by-step guide: You can access the theme and color customization settings within FooGallery PRO, via the individual gallery settings. While the Slider PRO layout doesn’t include a gallery lightbox, you can fine-tune the settings for the main image panel. Here you can adjust specific settings for your video slider.

• Theme: General appearance settings include a theme option. You can select Light or Dark. 
• Controls: In the Controls tab within the Slider settings, you can adjust how the controls display – choose to keep the same as the theme, or select from five predefined colors. 

There are benefits to inheriting the display panel colors from the gallery theme (light or dark), such as consistency across galleries. But using custom colors can make your galleries more eye-catching thereby boosting user engagement.

Adding Buttons 

Using navigation buttons with your video slider is essential for user experience, as it allows for easy navigation through the gallery.

Step-by-step guide: There are various options for navigation in FooGallery’s Slider PRO layout.

• Autoplay: If you choose to use the autoplay function, you’ll see a button on the panel where users can stop the autoplay.
• Controls: In the Controls panel you can opt to display buttons on hover or all the time. You can also choose to display them inline or as an overlay in the image panel. You then have the choice to show or hide several of the buttons, such as the full screen, maximize or captions buttons.

Thumbnails and Captions 

Gallery thumbnails give the user an overview of the content in the gallery, allowing them to browse through the content they wish to see. Adding captions to the main image and the thumbnails further enhances the navigation and user experience. 

Step-by-step guide: Setting up and adjusting thumbnails in Slider PRO is easy.

• In the Thumbnails tab for the Slider, you can choose the positioning of the thumbnails (top, bottom, or on the side) and you can adjust the size and fit. You are also able to show or hide captions and choose the alignment of them. 

• In the Captions tab, you’ll see various options for the display of your captions. It is recommended that you add captions, titles, and other metadata to your videos to make them more engaging and accessible. Some platforms like YouTube will pull in this metadata with the video, but for others, you may need to fill in details when importing the video. 
• If you’re using images in the gallery as well, you can choose the source of the caption and description. These can be the same as the thumbnail captions, or you can make them different. You can edit your captions, alt text, and other metadata in the media library or by using the Advanced Attachment Modal. Alternatively, you can override these with custom captions, which you can set up using basic html and placeholders. 

Combining Images and Videos 

Having a mixed media gallery, using a combination of images and video in a single slider, can help to engage users and increase the time spent on a page. It’s also effective for a number of scenarios, such as in an ecommerce gallery promoting a specific product, or as part of a tutorial showing step-by-step instructions with a how-to video. 

Step-by-step guide: With FooGallery PRO Expert, it is easy to combine images and videos in one slider (as we did in the slider gallery at the beginning of this post).

• Begin by creating a gallery as usual and selecting the Slider PRO layout. Then, to add your images, click on Add Media and either select images from your Media Library or upload new images to your gallery. 
• To embed videos in the gallery, click on Add Media and select the Import Video tab. You can then import your videos as previously outlined. 
• To change the order of your gallery, you can use the drag and drop feature, or one of the sort options. 

As with any gallery, image management is important to ensure better page speed and optimization. The customization options available for mixed media sliders, are much the same as for your other galleries, allowing you to adjust the transition or hover effects, and the appearance of the thumbnails, along with the autoplay settings for the videos.

WooCommerce Integration 

With WooCommerce integration, FooGallery PRO Commerce gives you the ability to sell directly from your gallery! This means you can turn your video slider into a product gallery. Here are some ways to add ecommerce functionality to a video gallery:

• Add Buy Now, Add to Cart, or More Info buttons or Sale Ribbons to your images. 

• You can manually add a custom link to a product page to individual items in your gallery for complete control.
• Adding a video to this content can further help increase sales: 44% of consumers say they’d prefer to watch a short product or explainer video, which can help them learn more about brands and products. 

Unlock Visual Storytelling With FooGallery PRO 

Video content is an undeniably valuable resource for websites, as it improves user engagement  

and interaction. FooGallery PRO effortlessly supports video galleries, allowing users to easily embed videos, including from platforms like YouTube and Facebook. This allows for easy and seamless integration of videos with WordPress.

More than this, there are various customization options available in FooGallery PRO Expert and Commerce. These options can be tailored to match your website design and brand. 

FooGallery PRO gives you responsive gallery layouts, ensuring galleries and sliders look great on all devices, from desktops to mobile phones. It also implements lazy loading, which makes for a faster initial page load, which means users stay on your page.

Taking all of this into account, it’s easy to see why FooGallery is the best solution for enhancing user engagement with video sliders on WordPress websites. Unlock the potential of visual storytelling and try FooGallery PRO Expert now.