1Days
18Hrs
32Mins
59Secs

HUGE BLACK FRIDAY SALE

30% off all plugins - no coupon code needed
Plugin Sale

Tutorial: How to create a WordPress video gallery

March 11, 2021
WordPress video gallery plugin

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.

WordPress Video Gallery FeaturedKeep reading to learn how to use the Document Library Pro plugin to create a searchable video gallery. While it isn't just for videos, it is one of the best WordPress video gallery 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 for setting up your WordPress video gallery. You can choose what information to display about your videos, how to size them, how many videos to display in 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.

Create a video library
Install Document Library Pro today and start adding and sharing videos - the easy way!

At the end of this 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 video gallery, as well as search and filter to easily find their ideal videos.

Document Library Pro creates a WordPress video gallery in a table layout. You can use it 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 table will automatically play in an online video player, directly on the video gallery page. You can also display them on a separate page for each video, or allow users to click through to watch on video platforms like YouTube or Vimeo.

This WordPress video plugin also lets users search, sort, and filter the table 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 table, 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 plugin.

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 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 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 on a website like YouTube - then add a link 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 video gallery page.
  • Shortcodes - Enable this option. This is essential in order for the main video gallery page to display embedded video players.
  • Filters - Choose 'Custom' and add doc_categories and/or doc_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.

WordPress video gallery individual video.
A WordPress video gallery with 1 video per row

If, however, you're planning to create video playlists then you'll need a separate Document post for each playlist, but not each video:

WordPress video gallery playlist
A video playlist in a WordPress video gallery

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.

Use these steps to add each video or playlist to the gallery:

  1. Go to Documents → Add New in the WordPress admin.
  2. 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).
  3. 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 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, 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 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:

Where to find YouTube URL for WordPress video gallery

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:

  1. Click the Add Media button above the WordPress toolbar and upload your video file (e.g. MP4 or MOV).
  2. Select the video in the WordPress media library.
  3. 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.

  1. Click Add Media above the WordPress toolbar.
  2. 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.
  3. Tick all the videos you want to include in the WordPress video gallery playlist.
  4. Click the Create a new video playlist on the right.
  5. 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.

WordPress video playlist
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:

  1. On the main video gallery page, within the 'content' column of the table. (As we saw above, you can rename this column to anything you like.)
  2. 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/

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

WordPress video grid

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 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 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 which lets you change the column widths. I'll provide more information on customizing the video sizes next.

Changing the size of each video

The best way to customize the size of your embedded video players is to adjust the column widths in the table. The videos will automatically adjust to fit the available space.

By default, the Document Library Pro WordPress video 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 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 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.

WordPress video library

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 table. If you prefer, then you can list different 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. You can then add as many shortcodes as you want, wherever you want.

The great thing about using Document Library Pro as your WordPress video 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 to list different types of resource in different places on your site.

Once you've installed this WordPress 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!

woocommerce video gallery plugin example
A WooCommerce video store powered by the WooCommerce Product Table plugin

It is also possible to create an e-commerce video gallery. 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 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 videos online.

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 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 the video gallery you want, so have a play around and check out the knowledge base for even more ideas.

Create a video library
Install Document Library Pro today and start adding and sharing videos - the easy way!

6 Comments

  1. Er Abhishek Anand
    August 9, 2021 Reply

    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!

    • Edge
      August 10, 2021 Reply

      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!

  2. Joquim
    April 28, 2021 Reply

    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?

    • Edge
      April 28, 2021 Reply

      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!

  3. Blake
    September 25, 2020 Reply

    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...

    • Edge
      September 25, 2020 Reply

      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!

Please share your thoughts...

Your email address will not be published.