Tutorial: How to create a WordPress video gallery
It's so easy to embed video in WordPress these days, but it's not so easy to create a video gallery listing all your videos in a grid – unless you use the right plugin. This article will teach you how to create a responsive WordPress video gallery - the easy way.
Keep reading to learn how to use the Document Library Pro plugin to create a searchable WordPress video gallery. While it isn't just for videos, it is one of the best WordPress video plugins around. It makes it easy to add a video grid or video portfolio to your website.
You'll learn how to add videos to your gallery using 3 different methods:
- Embedding a video that is hosted elsewhere into WordPress, for example, YouTube videos or Vimeo videos.
- Directly uploading video to your WordPress website.
- Creating a video playlist.
We'll also look at the many different options and functionality for setting up your WordPress video gallery. You can choose what information to display about your videos, how to size them, how many WordPress tutorial videos to display on each page of the gallery, and more.
Your WordPress video gallery will be fully responsive and will resize to fit different screen sizes and mobile devices.
At the end of this step-by-step tutorial, you'll know how to create a professional-looking video gallery for your WordPress site. Your visitors will be able to watch videos directly within the WordPress video gallery, as well as search and filter to easily find their ideal videos.
Why Document Library Pro is the best WordPress video gallery plugin
Document Library Pro creates a WordPress video gallery in a choice of gallery layouts. The table layout lists each video on its own row of a searchable, filterable table. The grid layout displays each video within a tile, similar to Netflix.
You can use this WordPress video gallery plugin to embed any type of video into your WordPress site. This includes:
- Any video hosting service YouTube, Vimeo, Dailymotion, Animoto, Blip, Cloudup, CollectHumor, Facebook videos, Flickr videos, TED talks, VideoPress, etc.
- Types of video Long videos, short video snippets, promotional video, product demonstrations/reviews/unboxings, stock footage, educational videos, event coverage, how-to video tutorials, interviews, presentations, video commentary, vlogs, webinars.
- All video genres Animations, behind-the-scenes footage, drone footage, movies, and films, non-fiction videos.
The videos in the gallery will autoplay in an online video player, directly on the video gallery page. You can also display videos on a separate WordPress page for each video, or allow users to click through to watch on video platforms like YouTube or Vimeo.
This WordPress video gallery plugin also lets users search, sort, and filter the gallery from the front end. As a result, visitors can quickly find the video(s) they’re looking for.
You can list all your videos in a single gallery, or you can list different videos on different pages on your WordPress site. It's super flexible and with over 50 options, it's the perfect WordPress video gallery plugin. The all-in-one plugin also provides a user-friendly player interface that lets you add SEO-optimized video galleries quickly.
Create your responsive WordPress video gallery
1. Install the video gallery plugin
The first step to creating your WordPress video gallery is to install the Document Library Pro plugin. You need this in order to add WordPress tutorial videos and display them in a video gallery online. It will work on any WordPress website and any theme.
After installing the plugin, go to the settings page and enter the license key from your 'Getting Started' email. Next, go to the 'Document Libraries' tab and choose how you want your video galleries to look. Pay particular attention to these options:
- Columns - There are lots of available columns. As a minimum, I recommend these for a WordPress video gallery:
title, content:Watch Online
. The title column will display the video name, and the content column will show the embedded video player. You can see that I added :Watch Online after the name of the content column. This will appear as the column header, so change this to anything you like. If you want people to be able to download videos - or click through to watch them like a YouTube video gallery - then add alink
column too. - Clickable columns - If you want people to be able to click on the name of a video to watch it on a separate page, then leave this as it is. Add
none
to disable these links and keep people on the main WordPress video gallery page. - Shortcodes - Enable this option. This is essential in order for the main WordPress video gallery page to display embedded video players.
- Filters - Choose 'Custom' and add
doc_categories
and/ordoc_tags
, depending on how you're planning to structure the video gallery. This will add a categories filter dropdown and/or a tags filter dropdown above the video gallery. It's a quick way for people to find specific types of video, for example by genre or year. - Lazy load - Enable this if you're listing lots of videos in the gallery. It loads each page of videos one at a time, which improves page load times.
2. Add videos to the gallery
Now the overall structure of your WordPress video gallery is in place, it's time to start adding videos and/or video playlists.
If you want individual videos to appear in their own row of your WordPress gallery as below, then you'll need to add each one as a separate 'Document' post. You can do this in the 'Documents' section of the WordPress admin.
If, however, you're planning to create video playlists then you'll need a separate Document post for each playlist, but not each video:
Note that you'll be able to include a combination of individual videos and playlists in your WordPress video gallery. For each 'Document', add either one or more videos. I'll tell you how to do this next.
Adding your videos
Use these steps to add each video or playlist to the gallery:
- Go to Documents → Add New in the WordPress admin.
- Add a title for the video, plus any other information such as categories, tags, or an excerpt (which is useful for adding a short video description or summary).
- Next, embed your video in the main content area using one of the following 3 methods:
Method 1 - Embed a video from YouTube or Vimeo
The most reliable way to add a video to your WordPress video gallery is to first host it on a third-party video platform. YouTube and Vimeo are the most popular, but you can embed from any of the video services in this list. (It's fine to use other video platforms too or use self-hosted videos, but instead of just pasting the URL, you need to get the embed code and paste it into the 'Text' view on the Add/Edit Document screen.)
Using a specialist video host is a great choice because:
- It will save space on your web hosting account.
- Dedicated video hosts automatically create multiple versions of your videos behind the scenes. This means that your videos will play for more people, whatever technology or device they're using to access your website. You don't have to worry about writing any fancy code to check the user's device or serve alternate versions of your videos - it all happens automatically.
- You get lots of extra features from specialist video hosts such as view counters, social sharing, annotations, mobile-friendly cards, monetization through advertising, etc.
- If you use a public video website such as YouTube then people can also find your videos directly via the host. This will help to increase your traffic. If you'd rather your WordPress video gallery not be publicly available on the hosting site, then I'd recommend Vimeo. Vimeo has more privacy settings and you can protect Vimeo videos so they can only be viewed on your domain.
If you're embedding WordPress tutorial videos from one of the files in this list, you just need to embed the URL of your video directly into the post. To do this, view your video on YouTube, Vimeo, social media platform, or whichever site you're using, and copy the URL from the address bar at the top of your browser. To help you find the video URL, I've circled it in the screenshot below:
Then, simply paste the URL into the content area of your WordPress post. WordPress will instantly convert it into an embedded video player.
Alternatively, you can use the free or premium versions of Presto Player to upgrade the default WordPress video player:
Method 2 - Upload the video directly to the media library
If you prefer, you can host videos directly on your WordPress website and embed the media files:
- Click the Add Media button above the WordPress toolbar and upload your video file (e.g. MP4 or MOV).
- Select the video in the WordPress media library.
- Make sure the Attachment Display Settings section is set to Embedded Media Player and click Insert into post.
Again, WordPress will automatically embed a watchable video into your post.
Method 3 - Create a video playlist
Finally, you can add entire video playlists to your WordPress gallery. These have to be hosted in the WordPress media library.
- Click Add Media above the WordPress toolbar.
- Click the Create Video Playlist option on the left. Note, this option will only appear if you already have video files in your media library. Upload some videos to WordPress if not.
- Tick all the videos you want to include in the WordPress video gallery playlist.
- Click the Create a new video playlist on the right.
- On the next screen, add the caption that should appear for each video. Tick the boxes to indicate whether to show the video list and images in the playlist. Then click Insert video playlist.
WordPress will embed the playlist directly into your page or post.
Where will the video players appear on my website?
Whichever method you use to add your videos and playlists, they will appear in 2 locations in your WordPress video gallery:
- On the main video gallery page, within the 'content' section. (As we saw above, you can rename this column to anything you like.)
- If you haven't disabled the clickable columns, then people can also click the video name to access a separate page for each video or playlist. The embedded video player will appear on this page. https://barn2.com/kb/dlp-column-widths/
3. Display your WordPress video gallery
Now all your videos are ready to go, you're ready to display your WordPress video gallery! The good news is that most of this has already been done for you. All you need to do is check it, make any tweaks, and add a link to your website menu so that people can find the video gallery page.
You can also create additional video galleries if you need more than one.
Viewing the video gallery page
Click on the 'Pages' link on the left of the WordPress admin, and you'll see all your pages listed. One of these is called 'Document Library' and contains your WordPress video gallery. Rename this to something specific to videos, such as 'Video Library'.
Now view the page. You will see all your videos listed in a searchable table or grid with whichever settings you chose in Step 1.
Go back to the settings page and make any changes to tailor the video gallery to your requirements. You may also want to edit the WordPress video gallery page directly and add some options to the shortcode which has been added to the page. For example, there's a shortcode option that lets you change the column widths. I'll provide more information on customization options for the video sizes next.
Changing the size of each video
If you are using the table view then the best way to customize the size of your embedded video players is to adjust the column widths. The videos will automatically adjust to fit the available space.
By default, the Document Library Pro WordPress video gallery plugin sets the column widths automatically based on the content of each column. But for a WordPress video gallery, you might want to make the video player column wider so that people can see your videos more easily.
To customize the column widths in the video grid, you need to add width="" to the gallery shortcode. Between the quotation marks, you can add a number for each column to represent the percentage of the table each column will occupy. Note the numbers must add up to 100% and be separated by commas. In the example below, the 4 columns will take up 40%, 15%, 30%, and 15% of the table, respectively:
[doc_library columns="content:Watch Now,title,excerpt:Description,category" widths="40,15,30,15"]
(Note: In this shortcode, I have set the columns option to show you that the number of columns matches the number of widths. However, it's easier to set the columns on the WordPress gallery plugin settings page.)
The first column (content) gets 40% of the table width – the biggest width to give more space for the embedded video player. The second column (title) gets 15% as the video titles don't need much space. The third column (excerpt) is slightly wider to allow for more text. The final column (category) is also quite narrow.
Play around with the widths in your own video gallery to get the column sizes working as you want them.
Creating multiple video galleries
By default, all your videos are listed in one new gallery. If you prefer, then you can list different videos like WordPress training videos on different parts of your site.
You can add a video gallery to any post or page on your WordPress website, or even within a text widget.
Go to the page/post/widget where you want to add the gallery. In the main content area, add the following shortcode:
[doc_library doc_category="music"]
This will list all videos from the 'music' category. Edit the shortcode to include whichever category of videos you want to list in the gallery like WordPress training videos. You can then add as many shortcodes as you want, wherever you want.
Other uses for Document Library Pro
The great thing about using Document Library Pro as your WordPress video gallery plugin is that it's not just for videos. You can get even better value for money by using it for other purposes elsewhere on your site. For example:
To use it for multiple purposes, go to Documents → Categories and create categories for each use case. For example, you might have a 'Video' category with various sub-categories for your video genres, and a 'Documents' category with sub-categories for your document types. You can then use the [doc_library category="videos"]
shortcode lists different types of resources in different places on your site.
Once you've installed this WordPress video gallery plugin, you can use it as many times as you like. Be creative and get more for your money by using Document Library Pro in different ways!
Create a WooCommerce video gallery
It is also possible to create a WooCommerce video gallery for an ecommerce site. Each video would be a 'product' and would be listed in a table with a preview of the video. People can watch the preview and then click a 'Buy' button to purchase the video - either as a digital download or a physical DVD.
To do this, you need to use our other plugin - WooCommerce Product Table. It has similar features to Document Library Pro but works with the free WooCommerce plugin so that you can actually sell your WordPress training videos online.
Create your WordPress video gallery today
Now that you know how to create a fully featured, fully responsive WordPress video gallery, it's time to get creative. To get started, download the Document Library Pro plugin.
- 100% flexible.
- List any type of video.
- Quick 10-minute setup.
- Expert support and documentation.
- Free 14-day trial - love it or you pay nothing!
Follow the steps in this tutorial to set up your WordPress video gallery in no time at all. Don't forget it's simple to make the exact video gallery you want, so have a play around and check out the knowledge base for even more ideas.
6 Comments
Thanks Mam it solved my problem. I have lots of videos on my website and I wanted to organize it in one place as a gallery. With Barn2 plugin, I can easily create video gallery. Thanks a lot!
Hi, Anand. Brilliant! Thanks for letting us know. I'm glad to hear this article and Document Library Pro are helpful. Should you have any questions, just let me know. You can also get in touch and discuss any concern in detail via our dedicated Support Center. Cheers!
This guide was very helpful because it assisted me in so many ways since I’m new in web design but willing to be better. I have a quick question that I wonder if you could answer. I've set up Woocommerce because I might be selling things in the future but am not right now. WordPress still has the shopping cart icon on my home menu and I’m not sure how to get that off for now. Any thoughts?
Hi, Joaquim. Thanks for letting us know - I'm glad to hear it was helpful information for your pursuits in website design and development.
The shopping cart displayed in the header of your theme shows that your theme is WooCommerce compatible. It is automatically displayed as long as the WooCommerce plugin is active on your site.
If you're not actively using any of the WooCommerce generated areas or pages on your site (such as the shop and product category pages, single product pages, cart and checkout pages, WooCommerce account page, etc.) and so have no reason for it to remain active on your site right now, then you can deactivate it. This will also remove the shopping cart icon displayed in your site's header.
Sometimes the theme you're using might also have a WooCommerce option in the Customizer that allows you to toggle the display of the shopping cart icon.
Alternatively, if you'd prefer to keep the WooCommerce plugin active, you can add/apply custom CSS in the Additional CSS of your theme's Customizer to hide or not display the cart icon.
I hope this makes sense and helps. Cheers and keep safe!
I need to make a page featuring several embedded 9:16 youtube videos that can be sorted by category. This looks like a great solution. I assume this process/these plugins will work with vertical videos but since I do not see any mention of it I wanted to ask before getting the plugins. Thanks in advance...
Hi, Blake. Thanks for your interest in Posts Table Pro. Our plugin will display your videos exactly as they are embedded. You can use the Column widths option to ensure that the width of the video column in the table is wide enough for your videos.
Let me know if you have any other questions. You can also get in touch with us via our dedicated Support Center. Thanks!