Create a WordPress video gallery using DataTables

How to Create a WordPress Video Gallery Using GravityView DataTables

Written by Casey Burridge

Last updated:

Categories GravityView

Tags , ,

WordPress makes it easy to embed videos on your website, but displaying videos in a searchable grid layout isn’t as easy – unless you have the right plugin!

Although it’s not just for videos, GravityView’s DataTables layout is a powerful WordPress video gallery solution. Using DataTables you can categorize and display embedded videos from YouTube, Vimeo and other platforms.

Keep reading to find out how to use GravityView’s powerful DataTables layout to create a searchable video gallery.

Sneak Peek

Here’s a sneak preview of the finished video gallery:

a WordPress video gallery build using GravityView DataTables

As you can see there’s a handy search bar at the top allowing users to search for videos based on category or keyword. 

A video gallery is a way to display video content on your website. Video galleries allow you to display embedded videos in a grid layout.

Each video in the gallery is usually categorized and tagged so that users can easily search for videos they want to watch.

Video content is on the rise. According to stats from Oberlo, people watch over 1 billion hours of YouTube videos everyday. Yes, that’s “billion”, with a “b”.

It’s not surprising then that more and more people are incorporating video content into their websites. In fact, there are several reasons to build a YouTube video gallery for your website. Here are some examples:

  • You’re launching an online course and need a way to organize video content
  • You want to create a searchable repository of online videos
  • You’re a video blogger (“vlogger”) and need a way to organize videos on your website

Why the GravityView DataTables Layout Is Best for Creating WordPress Video Galleries

GravityView is a plugin that allows you to display Gravity Forms entries on your website using a range of different layout options. 

Gravity Forms collects data and GravityView displays it.

The DataTables layout isn’t just for videos, but it’s still one of the best ways to create a front end video gallery on WordPress!

The GravityView DataTables layout includes a number of powerful features, making it the perfect WordPress video gallery plugin:

  • Advanced sorting and filtering
  • Display videos from any hosting service (YouTube, Vimeo, etc)
  • Display all types of videos
  • Display all video genres
  • Searchable
  • Fully responsive

By the end of this tutorial, you’ll be able to create your own video gallery using GravityView’a DataTables layout!

Building Your WordPress Video Library

In this section, we’ll show you how to build a video gallery using GravityView and display embedded YouTube or Vimeo videos.

Our video gallery will consist of two “parts”:

  1. A submission form where users (or Admins) can submit YouTube or Vimeo URLs. For this we’ll use Gravity Forms.
  2. A View where the videos will be displayed along with categories, tags and other relevant information. For this we’ll use the GravityView Datatables layout.

Let’s get started! 

Creating the Submission Form

The first step is to create the video submission form. To create a new form in Gravity Forms hover over Forms and click New Form. Now give your form a name and click Create Form.

Now you can start building your video submission form using Gravity Forms’ drag and drop builder. The most important field to add is a Website field for capturing video URLs. Other than that, feel free to add any relevant fields you feel are necessary.

For this example, we’ll keep things simple by adding only three fields:

  • Video URL (Website)
  • Category (Drop Down)
  • Tags (Single Line Text)

When we create the View, we’ll make the Category and Tags fields searchable so users can easily find relevant videos that they’re interested in watching.

The Gravity Forms form builder

When you’re finished building your video submission form, click Save Form.

Finally, you’ll need to embed your form on a page or post. You can do this using the Gutenberg block or the Gravity Forms embed shortcode.

Configuring the DataTables Layout

After creating your video submission form, the next step is to create the video gallery using GravityView’s DataTables layout.

📝 To use the DataTables layout, you’ll need a GravityView Core + Extensions license or All Access license.

After installing GavityView, create a new View by hovering over Views and selecting New View. Now give your View a name and select your video submission form as the data source.

The 'Video gallery' form set as the View Data Source

After selecting a data source, you’ll need to choose a View Layout. Choose the DataTables Table layout.

💡 Pro tip: If you don’t have DataTables installed yet, follow this helpful guide.

The GravityView DataTables layout option under 'Choose a View Type'

Now you can start building your video gallery using GravityView’s drag and drop View editor!

The DataTables layout allows you to display Gravity Forms data inside a searchable, responsive table. The View editor is where you configure the layout by adding fields and widgets. 

To ensure your videos display as embedded video players and not regular links, you’ll need to add the Website field inside a custom content field.

To do this, scroll down to the Entries Fields section, click on the ‘+ Add Fields’ button and select Custom Content

An arrow pointing to the Custom Content field

Now click on the gear icon to bring up the field settings and add the website field merge tag inside the text editor. After that, check the box that says “Render oEmbeds”.

The 'Render oEmbeds' checkbox underneath the Custom Content text editor

Now you can add your other form fields below! Each new field you add will be displayed as a new column in your table.

The 'Entries Fields' section of the View editor

After adding fields to the View layout, it’s time to configure the search settings.

Configuring the Search Settings

Adding a search bar to your video gallery will allow users to filter videos by keyword or category.

To add a search bar, scroll up to the Top Widgets area, click ‘+ Add Widget’, and select the Search Bar widget.

Now click on the gear icon to open the search settings. Here you can specify which fields are searchable and choose whether search results should match all fields or only one field.

The GravityView Search Bar Search Settings

After configuring the search settings, feel free to add other widgets such as page links or pagination info!

The Top Widgets area in the View editor

If you want your video gallery to be responsive you’ll need to enable the “Responsive Tables” option in the View Settings.

Enabling Responsive Tables

To ensure your video gallery is responsive at different screen sizes, scroll down to the Settings meta box, click on the DataTables tab at the bottom and check the box that says “Enable Responsive tables”.

The 'Enable Responsive Tables' checkbox in the DataTables settings

That’s it! When you’re done, make sure to save your View by clicking Publish.

If you want to embed your video gallery on a WordPress post or page, simply copy and paste the GravityView embed shortcode into your page editor.

The GravityView embed shortcode inside a Gutenberg 'Shortcode' block

After that, preview your page on the front end. Here’s what our video gallery looks like after adding a couple of videos:

The finished WordPress video gallery displaying two videos

The final thing left to cover is adding new videos to the gallery.

First, copy the URL for the video you want to embed. This could be from YouTube, Vimeo or another video platform.

An arrow pointing to the URL of a YouTube video page

Next, head over to the page containing your video submission form and submit the video URL along with any other relevant information.

Gravity Forms video submission form

After clicking “Submit”, the new video will automatically show up in your video gallery.

Other Uses for the GravityView DataTables Layout

The great thing about the GravityView DataTables layout is that it’s not just for videos! In fact, you can use DataTables to create a wide range of powerful applications.

Here are some examples:

There’s no limit to what you can do with GravityView and the DataTables layout, so play around and get creative!

Are you looking to display embedded videos in a responsive grid layout? Embedding videos on WordPress is easy, but displaying them in a searchable grid layout requires the right plugin!

In this post, we showed you how to create a WordPress video gallery using GravityView’s powerful DataTables layout.

So what are you waiting for? Start building your WordPress video gallery today!

Join Our Newsletter!📧🙌

✅ Helpful Gravity Forms content straight to your inbox

✅ Be the first to hear about new updates and releases