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 using the Posts Table Pro plugin.
While Posts Table Pro isn’t just for videos, it is one of the best WordPress video gallery plugins around – letting you easily add a video grid or video portfolio to your website:
Posts Table Pro
Create your dynamic video gallery now!GET THE PLUGIN
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 or Vimeo
- Directly uploading video to your WordPress website
- Creating a video playlist
We’ll also look at the many different options for setting up your WordPress video gallery: you can choose which columns to display, column width, how many videos to display in each page of the gallery, and much 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 tutorial, you’ll know how to create a professional-looking video gallery for your WordPress website. Your visitors will be able to watch videos directly within the video gallery, as well as search and filter to easily find their ideal videos.
1. Get ready to create your responsive WordPress video gallery
Before diving into creating your WordPress video gallery, first up, you’ll need to install the right plugin and do a bit of planning:
Install the Posts Table Pro plugin
You can add a video gallery to any WordPress website with any theme. The only essential video plugin is Posts Table Pro, which you need to create the video gallery online. Download this now and install it on your site.
Plan how to store the videos for your gallery
You’ll be using Posts Table Pro to create a searchable, sortable video table, but first you’ll need to add your videos and video playlists. This means you need to choose how to store the videos that appear in your gallery.
The Posts Table Pro plugin works by displaying posts from your WordPress website – these can be standard posts, pages, or custom posts. So you’ll need to add your videos within posts, pages or a custom post type.
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 post (or custom post):
If, however, you’re planning to create video playlists then you’ll need a separate 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.
In the screenshots and video for this tutorial, I use a Video custom post type. This is the easiest way to organize your videos as you’ll have a dedicated area for storing videos in the WordPress admin, so I recommend setting up a Video custom post type before proceeding to step 2.
If you’re a WordPress developer, then you can create your custom post type programmatically. If not, I recommend the Custom Post Types UI plugin. This makes it really easy to create custom post types in WordPress, without any technical know-how.
2. Add your videos to the gallery
Once you’ve installed Posts Table Pro and planned the structure for your video gallery behind the scenes, the next step is to add your videos to your website.
Go to Video → Add New (if your custom post type is called Video. If not, add a new post using your chosen post, page or custom post type).
Add a title for the video, then 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 video to your WordPress video gallery is to first host it on a third-party specialist video website. YouTube and Vimeo are the most popular, but you can embed from any of the files in this list.
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 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 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 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.
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:
- If you’re using the Classic WordPress Editor, click the Add Media button above the WordPress toolbar and upload your video file (e.g. MP4 or MOV). If you’re using Gutenberg, insert an ‘Audio’ block.
- Select the video in the 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:
- Click Add Media above the WordPress toolbar if you’re using the Classic Editor; or add a ‘Playlist’ block if you’re using Gutenberg.
- 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.
- Tick all the videos you want to include in the 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.
4. Add any further information about your videos
Next, add any further information that you want to display in your video gallery. For best results, I recommend adding the same fields of information to each of your video posts.
Examples of further information for a WordPress video gallery include:
- Video length
- ‘Buy now’ button
You can use the standard WordPress functions to set up any categories or tags for your videos.
Information added to the main post content with the embedded video, will appear in the same column as the media player, which isn’t ideal. So any other information, such as text or buttons, is best stored in the Excerpt or a custom field. This will ensure the information can be displayed as separate columns, and that it’s sortable and searchable.
Later in this tutorial, I’ll show you how to create a WordPress video gallery with columns for title, content and excerpt. If you want to copy the exact shortcodes I use in this tutorial, you’ll need to add the video within the main content, add a description in the Excerpt field, and also structure your videos into categories. But you can use the knowledge base to add other column types, including custom fields. If you do this, note that your shortcode will be different from my examples below.
Tip: I recommend the Advanced Custom Fields WordPress plugin to create custom fields for storing data about your videos. For example, using the Advanced Custom Fields plugin you can easily create custom fields to add video lengths and ‘Buy now’ buttons, then display these as separate columns in the video gallery.
Once you’ve added any further information, click Publish for all your video posts.
5. Display your WordPress video gallery
Now all your videos are ready to go, you’re ready to display your WordPress video gallery!
Step 1 – Basic usage
You can add your 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:
[posts_table post_type="video" shortcodes="true"]
Replace the ‘video’ in post_type=”video” with the slug for your custom post type, or ‘page’ if your videos are on pages. If your videos are on standard WordPress posts, you can ignore the post_type element of the shortcode, as posts are displayed by default.
Adding shortcodes=”true” tells Posts Table Pro to display the watchable video player that WordPress created when you added your videos.
Now, view the page/post where you added the shortcode to see the first draft of your WordPress video gallery.
You’ll see the video grid has 4 columns: the title of each video page/post, the content where you added the embedded videos, the author, and the date. It looks professional but probably isn’t the information that you’d want to include in a video gallery. So let’s get customizing…
Step 2 – Change the column headings
Go back to the shortcode you added in step 1. We want to tell it which columns to display in the video gallery. Extend the shortcode as follows to display the video player in the left-hand column, with added columns for title, description and categories:
[posts_table post_type="video" shortcodes="true" columns="content:Watch Now,title,excerpt:Description,category]
In this shortcode, I’ve added a colon after the content and title columns, followed by the text I want to use as my column headers. This will rename the content column to ‘Watch Now’, and the excerpt column to ‘Description’ – while keeping the default names for the title and category columns. You can do this for any column to customize the title in the header row.
Update your page and see how your WordPress video gallery looks now. You’ll see the categories are now much more relevant and user-friendly. You can click on a category to filter by the videos in that category. You can also type a keyword into the search box or click on a column header to sort the grid.
Step 3 – Change the column widths
You might also want to change the width of the columns. Posts Table Pro will set this 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 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:
[posts_table post_type="video" shortcodes="true" columns="content:Watch Now,title,excerpt:Description,category widths="40,15,30,15"]
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.
Step 3 – Change the gallery link settings
By default, the title column in your WordPress video gallery is clickable. Clicking on it takes you to the single post page for each video. You can also click on categories to filter the video grid by that category.
You can disable some or all of these links if you like. For example, a lot of video libraries display a grid of videos and don’t wish to provide separate pages for each video. If this applies to you then you’ll want to disable the links.
To disable links, add one of the following to the Posts Table Pro shortcode:
- links=”none” – this disables all the links in the video gallery so that you can’t click on the title or category.
- links=”category” – this disables the links on the video titles, while leaving the category links as they are. This is a good option if you like being able to click on a category to filter the video grid, but don’t want people to access the individual video pages by clicking the title.
6. Other video gallery options
If you like, you can set up your WordPress video gallery by following the instructions in this tutorial exactly. However, the Posts Table Pro WordPress video plugin is very flexible and you can configure it to your exact requirements. For example, you can:
- Change the default sort order for your videos.
- Choose which columns are displayed and what to call them.
- Choose how many videos appear on each page.
- Add dropdown search filters above your gallery so that people can filter by category or tag.
- Change or hide the search and pagination links at the top and bottom of the gallery.
- Add your videos in different ways – for example if you want to use the main content area for something else, you can embed videos as custom posts instead.
- Display other types of content as well as videos – for example you can use it as a WordPress image and video gallery plugin, or as a video and audio gallery with music playlists.
- And much more…
Use the plugin knowledge base to find out what’s possible with Posts Table Pro and choose how to use it for your own WordPress video gallery. With so much flexibility, it’s easily the best video gallery plugin for WordPress.
Once you’ve finished designing your video gallery, think about the other ways you can use Posts Table Pro on your site. For example, you can use it to create a WordPress document library. You can create a publications library or knowledge hub. If you have an events website, use it to make an events list. Make a blog posts index of content table for your website. List your consultants or members in a sortable member directory. Once you’ve got the WordPress table plugin, you can use it as many times as you like. Be creative and get more for your money by using WordPress tables in different ways!
Create a WooCommerce video gallery
Posts Table Pro is compatible with WooCommerce, so if your videos are stored in WooCommerce products, you can still use Posts Table Pro. The advice in this tutorial equally applies to our WooCommerce Product Table plugin. If you want people to view videos and buy your products from the table, check out WooCommerce Product Table, as it may be even better at meeting your needs.
Create your WordPress video gallery today
Now that you know how to create a fully featured, fully responsive video gallery in WordPress, it’s time to get creative. To get started, download the Posts Table Pro plugin and 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 the video gallery you want, so have a play around and check out the knowledge base for even more ideas.
Posts Table Pro
Create your WordPress video gallery today!GET THE PLUGIN