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.
What Does Not Work?
My idea was to create a Revolution Slider for each video where the video layers were inserted, it would contain a title, link to the transcript and it would play either on the spot or in a popup. Finally, I built a few Sliders, inserted them into a page, multiplied them and after some testing figured out that this was not the way. The page was loading the videos from YouTube, all at the beginning and it was just too slow to load. Took up to 15 seconds before the inbuilt navigation through anchors started to work. Then I tried a version where I hid the video layer behind an image layer and activated the video layer just after clicking on the video image cover or the button, but still, the speed did not improve, as everything was loading in the background. Finally, after hours and hours of time spent trying different concepts, I found a working one. Although it sounds simple – using only pictures in Revolution Slider and then open the video in a popup on click, there were a few catches on the way.
How to Do It in 5 Simple Steps
This is what you can do to achieve a similar effect on your WordPress page:
- Create a revolution slider for one video with desired design
- In a popup maker plugin, create a new popup with the video in it and autoplay on.
- 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
- When you are happy with the layout and behaviour, clone the Revolution Slider and create it for all videos you have
- 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.
Detailed Tutorial or Making the Video Gallery Work
1. Creating First Revolution Slider
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:
- 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.
- Grey background under the video inserted as a layer.
- Video headline inserted as text.
- Transcript inscription inserted as text with a link added as a simple link action.
Now the slider is ready.
2. Creating the First Popup with Video In It
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.
3. Creating Your Video Gallery Page
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.
4. Making a Revolution Slider for All 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.
5. Finalising the Video Gallery Page
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.