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.
Here’s a sneak preview of the finished video gallery:
As you can see there’s a handy search bar at the top allowing users to search for videos based on category or keyword.
What Is a Video Gallery?
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.
Why Display a Video Gallery on Your Website?
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
- 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”:
- A submission form where users (or Admins) can submit YouTube or Vimeo URLs. For this we’ll use Gravity Forms.
- 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.
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.
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.
Now you can start building your video gallery using GravityView’s drag and drop View editor!
Constructing the Video Gallery
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.
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”.
Now you can add your other form fields below! Each new field you add will be displayed as a new column in your table.
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.
After configuring the search settings, feel free to add other widgets such as page links or pagination info!
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”.
That’s it! When you’re done, make sure to save your View by clicking Publish.
Embedding Your Video Gallery on the Front End
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.
After that, preview your page on the front end. Here’s what our video gallery looks like after adding a couple of videos:
The final thing left to cover is adding new videos to the gallery.
Adding 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.
Next, head over to the page containing your video submission form and submit the video URL along with any other relevant information.
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:
- Build a task-management system
- Create an audio gallery
- Display a book list
- Build a searchable database
- Create a WordPress book list
There’s no limit to what you can do with GravityView and the DataTables layout, so play around and get creative!
Create a WordPress Video Gallery Today
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