Creating WordPress Video Library with Revolution Slider

If you ever tried creating a nice looking gallery with good navigation in WordPress, you might have come to the finding that it is not as easy as it might look. You would expect to choose a layout, inserting video IDs from YouTube or Wistia, choosing categories and fine-tune navigation. However, you might find that your theme does not have any solution to that, not any plugin you’ve searched for. In this article, I will show you how to make a nice looking and working video gallery or library in WordPress using the Revolution Slider and a popup maker plugin.

With Compass Pools, we were looking at a solution to this problem and I found out that the only possible one is to create your own custom project. We wanted the videos to play on the spot instead of going to a separate page with the video we already had and also link to that page which contains also the video transcription. Also, we wanted to categorise the videos and make the navigation really easy. I tried different concepts using Visual Composer and Revolution Slider. I tried carousel, which looked good but only the videos in the middle played on click, so the navigation was not working as expected. We ended up wanting a tiled layout something like here. They were using Wistia videos (we could use both Wistia or YouTube) and they had nice navigation. Clean and simple, though we I did not like the need to open a new page when clicking on a different category.

This is what you can do to achieve a similar effect on your WordPress page:

1. Create a revolution slider for one video with desired design
2. In a popup maker plugin, create a new popup with the video in it and autoplay on.
3. Create a layout in your desired WordPress page e.g. using Visual Composer and insert a Revolution Slider multiple times there to test it. You will need a tweak (inserting a shortcode to this page) to make the Slider open the video in popup
4. When you are happy with the layout and behaviour, clone the Revolution Slider and create it for all videos you have
5. Insert all Revolution Sliders to the final template and test it – your video gallery is ready.

Sounds easy? There were some catches on the way, which I will explain in more detail now.

I decided the dimensions of the slider would be 600×400 px and set its width to auto. If you take a YouTube video and scale it to 600px width, the height would be 338 px. I used the 62 px to create the space for video heading and link to video transcript. As I wanted a three-column layout for the gallery and the width of the site is 1270px, 400 px would do the job, but I wanted the videos to look good on mobiles as well where they will be displayed using the full width of the screen, hence the higher dimensions. I named the slider VIDEO-01-01, because I intended to use 7 or more categories (the first number), each one with a few videos in it ( the second number is the video number within the category). Proper naming was necessary to process 40 videos with the chance of adding more in the future. In the settings, I have chosen layers to be selectable – this is good for SEO as people are able to save the layers or select them individually (and they appear separate in the code).

Within the slider, I inserted five layers:

1. Video cover image – which I created from all YouTube videos using this online YouTube screenshotting tool – it saves a lot of time. You might like to name your picture properly before uploading to WordPress and set an alt tag when selecting it so our video gallery is fully SEO optimised.  I activated hover over this image so I can change the pointer to the “hand” pointer. You do it in Style – Hover – Layer Hover on and you change the pointer to “pointer”. We also want users to open the video after clicking on this image, not only the video play button, so we need to insert a link into Actions tab. Click Add new Action, select Simple link and into Link URL insert “javascript:void(0)”. This is the first part of the magic on how to open the popup on click because you can’t simply enter a link to a popup (as it does not have any). Inserting this enables your video to open on the spot you are. You could insert also “#”, it would do the job, but when your video opens in the popup, your website on the background would actually scroll to top and the user might be lost after closing the video because he wouldn’t see the thumbnail of the video he was currently playing. The second part of the magic is adding a special class to this layer that would identify which popup should be opened on click. This value would change by every new slider you create, in this case, we enter “sg-popup-id-1” which tells the slider to open the first popup in our popup list (we come back to it soon).
2. Play button – over the cover image, inserted as Add Layers – Buttons – Predefined Elements. You need to insert the same Action – simple link to this layer and the same Attribute. In the Style section activate the Hover as well and in the Hover tab, define the behaviour of the button when hovered over, in our case I changed the background from grey to red and selected a transparency for it.
3. Grey background under the video inserted as a layer.
4. Video headline inserted as text.
5. Transcript inscription inserted as text with a link added as a simple link action.

Now the slider is ready.

In this project, I used the Popup Builder plugin which you need to install and activate first if you haven’t used it before. Here, you click on Add new popup, name it properly (can use the same style as for the Revolution Slider as you will end up having a popup for each of your videos). Insert the link to your YouTube video and save it. Also, there a few settings you might want to set and are shown in the picture here. For example, choosing the template of the popup, setting autoplay, setting its dimensions or behaviour after closing it. After that, just check the number of the popup, if it is your first one, it should be with ID 1. The same number needs to appear in the Attribute – CSS class of your two Revolution Slider layers so the magic works. In the picture attached, our popup has ID 2, so we would insert “sg-popup-id-1” into the CSS class of the Revolution Slider layers.

Now, just create a new page in WordPress and insert the created Revolution Slider there. I used Visual Composer, selected a three column layout and to test it, I inserted the one Revolution Slider there multiple times. Now, you will see your video thumbnails loading, but the video will not open on click. You need to make the last part of the workaround, which is inserting a shortcode to this page. For this purpose, you can just add a new text field at the end of your page where you add this “[sg_popup id=”1″ event=”click”]01[ /sg_popup]”. Now when you open the page again, voila, it will work as desired – it will open the video with the popup on click, automatically playing it. If you are happy with how it works – you are almost done – you have your own prototype. If now, fine tune the Revolution Slider or the popup settings and after that, you are ready for another part of the hard work – which is making the same for all of your videos.

Now the manual work comes to place – you need to create a screenshot for every video, resize it, rename it, upload it, clone the first slider, rename it, change the video cover, change the name of the video, link to transcript and id of the popup in the Attributes section. For each video, a new popup needs to be created of course.

Once you have the desired number of Revolution Sliders with all your videos ready, you can fine-tune the layout of your video library page, insert all of the sliders there and maybe play with some navigation. For this purpose, I created a text block with a link on top leading to rows for each category. This is easily done using anchors – you name your first row with videos of the first category let’s say as “category-1” – it is the ID of the row, and set the link in the top category navigation item to “#category-1”. If you wonder why our video library scrolls so smooth and yours does not, it is the magic of a plugin I really like – the Scroll to Anchor, where you can set the speed of smooth scrolling and also the position where it should stop so it ends up exactly where you want it.