WordPress Video Galleries 101

In a previous article of ours, we talked about embedding videos in a WordPress site. Now, we’re going to take the conversation even further by designing a WordPress video gallery.

Before we proceed, let’s sum up a bit the shortest process of embedding videos in WordPress, via the “Add media” feature in WordPress.

1. Go to your WordPress post/page
2. Select “Add Media”
3. Upload a locally stored video or paste the URL of a Youtube video.

and you’re done!

Next, we’re going to cover two ways of designing WordPress video galleries:

• Via WordPress page builders (my favorite one, I’m going to explain later why – and I promise I won’t be biased)
• Via WordPress plugins

Do we have a deal?

Let’s get going!

 

Creating WordPress video galleries using WordPress page builders

As I mentioned before, I like using page builders. They give me lots of options. We all know that themes kinda have limited capabilities. And plugins usually come to the rescue with their added functionalities. 

If I wouldn’t use a page builder, I would need a different plugin for:

• Sliders
• Accordions
• Galleries
• Shortcodes
• Sidebars
• Carousels

and the list can go on.

 

Every plugin has its own way of dealing with things, and it can be daunting trying to understand how they function. On the other hand, if you use a page builder, the learning curve is way shorter. Everything goes inside blocks or components and can be edited in a very similar fashion. No more headaches. 

But the best of all is the fact that your website’s speed will be better. The more plugins you use, the less performant your site will be.

Now, let’s get to the technical side of this conversation.

WordPress page, builders are very similar, so the moment you know one, the learning curve for another one shortens rapidly.

For the purpose of this example, I’ll be using the Colibri PRO theme and the Colibri page builder. Usually, paid themes come with extra options, that’s why I didn’t go for a free plan. 

This combo can be really powerful.  You’ll see right away in how many ways we can design a WordPress video gallery.

Now, I headed over to “Pages” and select “Customize with Colibri” from underneath my “Homepage”. Here are some of the options available to you for crafting a WordPress video gallery (I’m telling ya, we’re gonna get creative).

• Portfolio block combined with video components
• Slider component

Before going deeper I want to make sure we are all on the same page.

Blocks are content elements that you can add to a website page or post. In Colibri, there are pre-designed content blocks for the following categories: Hero Accent, About, Features, Content, Call To Action, Blog, Counters, Portfolio, Photo Gallery, Testimonials, Clients, Team, Contact, F.A.Q., and Pricing.

Here’s a pricing block example:

Blocks are definitely making anyone’s life easier. They offer a starting point for almost every section of a site. 

Blocks and components can be added from the “+” symbol at the top of the left-hand side panel. You will see all the categories available, and you can also search by name.

You can also add blocks by going to the bottom of the site and selecting “Add Predefined Block”, or to the panel on the left, by selecting “Add Predesigned Block”. You’ll be guided to the same list of blocks as before. 

Now, all blocks are added at the end of a page. To move it somewhere else, just drag and drop it from the left-hand side menu.

Each block can be customized from the menu on the left. The same 3 options will show up if you want to change rows or blocks: Layout, Style, and Advanced. This is making your life easier because you do not need to adapt to the settings of various plugins.

I repeat, all design roads will lead to:

• Layout – where you can adjust the structure, spacing, width, and height of the container. Simply put, the container is the actual space a block occupies. Inside the container, you place the content (text, images).
• Style – where you can customize the background of your block or add dividers (visual elements that signalize when a website section ends or begins).
• Advanced – from typography and spacing to responsiveness, this is where you can get into the details of your block.

Components are tinier modules. They can come in various shapes: headings, sliders, dividers, buttons, carousels, and more. They can be added from the same “+” symbol. The difference is that you can drag them from the window of components and drop them anywhere you like on the site on the right!

They can be customized from the left panel as well, only that instead of “Layout”, you’ll see “Content”.

One important suggestion: don’t upload videos to WordPress. They occupy too much space and will affect your website’s performance. 

Sorry for the long intro, folks, but the moment we all have the same baseline, the actual creation of a video gallery will be a p-i-e-c-e-o-f-c-a-k-e! Pinky promise!

 

A. How to create a WordPress video gallery using a portfolio block and video components inside Colibri

I’ll make it as short as I can.

1. Select a portfolio block that fits your vision.
2. Delete the images. Because most of the blocks use images, we’ll replace them with videos.
3. From the “+” sign head over to components and drag the video one. A sample video will be inserted into the design.
4. Select the sample video.
5. From the panel on the left, choose the video that you want to place there. You can insert Youtube or Vimeo links or self-hosted videos.
6. Make the final adjustments: change the title, descriptions, the number of rows or columns. All the customization will happen in the panel on the left. Careful with your selections: a component, a column, the whole block, etc.

And you’re done.

 

B. How to create a WordPress video gallery using a slider in Colibri

Here are the steps:

1. Drag and drop the slider component
2. Select your slider and click on “More background options” from the “Content” option on the left.
3. Select “Video” from the 3 options for your slider’s background.
4. Upload your own video or insert a Youtube URL.
5. Add (use the “Add slide” button) or delete slides (use the “x” sign) from the slider.
6. Make other design customizations from the menu on the left: borders, spacing, transitions, sliding controls, typography, colors, etc. 

Et voilà, you’re done!

Now, there’s one more rock to turn over.

 

Creating WordPress video galleries using plugins

I’m going to keep this short. I picked three of the most popular video gallery plugins in the WordPress repository.

If you don’t know how to search for plugins and install them, here’s how you do it.

 

FooGallery

Source: wordpress.org/plugins/foogallery/

 

At its core, FooGallery is a photo gallery plugin. In its pro version, there’s an option for video galleries as well.

FooGallery PRO allows you to create a gallery with videos imported from YouTube, Vimeo, Facebook, TED and Dailymotion, or self-hosted sources.

This popular gallery plugin (200.000+ installs) has awesome gallery layouts, it’s responsive, Gutenberg-ready, and mobile friendly. The coolest thing is that it works by drag and drop.

 

Envira Gallery

Having more than 100.000 active installs, Envira Gallery has 1214 ( out of about 1350) 5-star reviews.

It’s pretty intuitive, as shown below:

What we love about Envira it’s that you can create stunning WordPress video and photo galleries by drag and drop in a matter of minutes.

The plugin has:

• Pre-built gallery templates
• Mobile -responsiveness
• E-commerce integration
• Youtube and Wistia embeds, but also custom ones.

 

Embed Plus for YouTube – Gallery, Channel, Playlist, Live Stream

Source: https://wordpress.org/plugins/youtube-embed-plus/

 

Like I already suggested, it’s not recommended to go for self-hosted videos. And because most of the world’s videos are on Youtube, this plugin takes the bull by its horns.

The plugin allows you to build WordPress video galleries with Youtube videos, channels, playlists, and even live-streaming. Lots of customizations are available. The plugin is also Gutenberg-ready, but it’s compatible with the WordPress classic editor as well.

And, we can call it a day!

I hope that our insights and knowledge proved useful to you. Now it’s time for practice, isn’t it?

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to Colibri’s Youtube channel and follow us on Twitter and Facebook!

 

[sibwp_form id=1]