How to make a YouTube Gallery in your WordPress website

WordPress Video Gallery is a powerful and easy-to-use WordPress plugin that allows users to display YouTube channel videos or playlist videos seamlessly on their websites. Whether you're a content creator, educator, business owner, or blogger, this plugin provides a hassle-free way to integrate and showcase video content without requiring any coding knowledge. It automatically fetches videos from a specified YouTube channel or playlist, ensuring that your gallery remains up to date without manual updates. Additionally, the plugin is fully responsive, making sure your videos look great on all devices, from desktops to mobile screens.

With WordPress Video Gallery, users can present their videos in multiple layouts, including grid, player, and scroll type, offering flexibility in how content is displayed. The intuitive interface allows for quick setup and customization, enabling users to match the gallery’s appearance with their website’s design. By leveraging this plugin, website owners can enhance audience engagement, improve user experience, and create a dynamic video showcase effortlessly.

Key Features

• Grid Layout: Displays videos in a card format. Clicking a card opens the video in a modal for playback.
• Player Layout: A primary video player sits at the top, while videos appear as cards below it. Clicking a card updates the player.
• Scroll Layout: Similar to the Player layout but with horizontal scrollable video cards.
• Slider: Adds smooth transitions to videos, ideal for modern, interactive galleries.
• Button Trigger: Embed a button that opens a modal with the specified video upon clicking.
• Floating Video: Automatically plays a video at the bottom-right corner after a set delay.
• YouTube Video Post: Add YouTube videos to posts by simply entering their IDs.
• Self-Hosted Video: Upload and showcase videos directly from your device.
• Scroll with Slider: A hybrid layout that combines scrolling and sliding features.
• Cover Popup: Videos are played in a modal triggered by a custom cover image.
• YouTube Embedded: Supports standard embedding with enhanced styling options.
• YouTube Card: Minimalist cards for embedding individual videos or small playlists.
• Responsiveness: Fully responsive across devices.
• Customization: Adjustable styles, colors, and layouts to match your website’s branding.

Use Case

The WordPress YouTube Gallery plugin is highly versatile and can be used across a variety of industries, websites, and content strategies. Below are detailed examples of how different users can benefit from its features:

Content Creators and YouTubers

• Easily integrate your YouTube channel or playlist into your website to showcase all your videos in one place.
• Keep your audience engaged on your website without redirecting them to YouTube.
• Highlight specific playlists, such as tutorials, vlogs, or series, with unique layouts like Grid, Player, or Slider.
• Use the Floating Video feature to keep a video visible as users scroll through your site.

Educators and Online Learning Platforms

• Create organized video lessons or tutorials in a scrollable playlist format for students to navigate easily.
• Use the Grid Layout to display a syllabus-like structure where each video corresponds to a course module.
• Upload self-hosted videos for private lessons, ensuring content security and control.
• Embed YouTube videos directly into posts or pages using the YouTube Video Post feature for topic-specific discussions.

Businesses and E-Commerce

• Showcase product demo videos or customer testimonials directly on your product pages.
• Use the Cover Popup feature to display explainer videos without taking up too much page space.
• Highlight marketing campaigns or webinars in a Slider or Scroll Layout for an interactive user experience.
• Keep customers engaged by using the Floating Video feature for promotional content.

Bloggers and Influencers

• Add interactive video galleries to blog posts to provide additional context, entertainment, or information.
• Use the Button Layout to embed videos in a subtle way, allowing readers to choose when to watch.
• Feature content from your YouTube channel directly within blog articles to cross-promote your platform.

Media, News, and Entertainment Portals

• Integrate interviews, news clips, or behind-the-scenes content with the Scroll Layout or Grid Layout.
• Use the Player Layout to focus on a primary story while offering related video content below.
• Highlight curated playlists of trending topics or niche interests in the Slider Layout.

Portfolio and Creative Showcases

• Artists, filmmakers, and videographers can use the Grid Layout or YouTube Card to present their portfolios professionally.
• Showcase highlights of your work with the Player Layout, allowing potential clients to browse through your content seamlessly.
• Use self-hosted video uploads to control branding and avoid external platform distractions.

Conferences and Event Organizers

Offer replay access to workshops or webinars using the Self-Hosted Video feature.

Create a video archive of event recordings, keynote speeches, and panel discussions.

Use the Slider or Scroll with Slider layout to present a seamless browsing experience for attendees or visitors.

WordPress Video Gallery is a fantastic plugin! It was easy to set up, and my YouTube videos appeared instantly in a clean and professional layout. The multiple display options make it super flexible. Highly recommended!

John Davis (Marketing Manager of TechSphere Solutions)

How to setup WordPress YouTube Gallery Playlist

Here’s how you can install and configure the plugin for your WordPress website:

Step 01: First we have to go to the WordPress dashboard.

Step 02: Then we have to click the Plugins option from the dashboard. Then we have to click  “Add New Plugin” button  , from there we have to click “Upload Plugin”. Then we have to choose the plugin from our device. Then we have to click install button. Here we can Active The Plugin or we may active it later from Plugins options

Step 3: After activation we will see a new option called “YouTube Gallery ” at dashboard. Hovering and clicking on setting you will get an option to set Api key. Here you have to provide your Api key like bellow. To get Api key follow the instruction in the link's video Get API Key

Step 4: Then you can choose a layout From YouTube Gallery like bellow.

Step 4: You can now add playlist id or channel Id

Step 5: Now after save in Frontend if you click a thumbnail the video will play in a Modal like bellow.

More screenshots

Scrollbar with Slider type Demo

Floating Type Demo

YouTube Video Posts Demo

Customization Options

Customization Options

Live Demo

Click the button below to explore a live demo of the WordPress YouTube Gallery plugin. Discover how standard blog posts can be transformed into stunning Barndominium-style layouts, showcasing real estate listings in an engaging and visually appealing way. The demo will allow you to see firsthand how this plugin can elevate your property presentations, providing a distinctive visual experience for potential buyers.

Download

Ready to enhance your real estate listings? Click the button below to download the WordPress YouTube Gallery plugin and start transforming your standard blog posts into visually captivating Barndominium-style formats. Create eye-catching listings that capture the attention of potential buyers and effectively market your properties.

Developer area

The WordPress YouTube Gallery plugin is designed with developers in mind, offering a range of hooks, filters, and customization options to extend its functionality. Below, you’ll find details on how to work with the plugin programmatically.

Hooks and Filters

The following hooks and filters are available for developers to modify or extend the plugin's functionality:

Action Hooks

1. yt_gallery_before_render
   Triggered before a gallery is rendered on the page. Use this to enqueue scripts, add custom styles, or modify behavior.
2. yt_gallery_after_render
   Triggered after a gallery has been rendered. Useful for appending additional elements.

phpCopy codeadd_action('yt_gallery_before_render', function ($gallery_data) { // Example: Log gallery data error_log(print_r($gallery_data, true)); });

phpCopy codeadd_action('yt_gallery_after_render', function () { echo '<p>Custom content after gallery</p>'; });

Filters

1. yt_gallery_render_attributes
   Modify the HTML attributes of the gallery container.
2. yt_gallery_video_data
   Customize the video data before rendering.

phpCopy codeadd_filter('yt_gallery_render_attributes', function ($attributes) { $attributes['class'] .= ' custom-class'; return $attributes; });

phpCopy codeadd_filter('yt_gallery_video_data', function ($video_data) { $video_data['title'] = strtoupper($video_data['title']); // Example: Make title uppercase return $video_data; });

Shortcodes

The plugin provides a powerful shortcode system to embed galleries into posts and pages. Below are examples of how to use and customize them:

Basic Shortcode

[yt_gallery type="grid" channel="CHANNEL_ID"]

Attributes

• type: Defines the gallery layout. Options include:
  • grid, player, scroll, slider, button, floating, etc.
• channel: YouTube channel ID to fetch videos.
• playlist: YouTube playlist ID.
• video: Individual YouTube video ID.
• autoplay: Set to true or false (default is false).

Example: Player Layout with Autoplay

phpCopy code[yt_gallery type="player" playlist="PLAYLIST_ID" autoplay="true"]

Custom CSS and JavaScript

You can add your own styles or scripts for further customization. Enqueue them using WordPress standards:

Adding Custom Styles

phpCopy codefunction enqueue_custom_yt_gallery_styles() {
    wp_enqueue_style('custom-yt-gallery', get_template_directory_uri() . '/css/custom-yt-gallery.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_yt_gallery_styles');

Adding Custom Scripts

phpCopy codefunction enqueue_custom_yt_gallery_scripts() {
    wp_enqueue_script('custom-yt-gallery', get_template_directory_uri() . '/js/custom-yt-gallery.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_yt_gallery_scripts');

Template Overrides

For advanced customizations, you can override the plugin's templates by copying them to your theme:

1. Navigate to the plugin's /templates folder.
2. Copy the desired template file (e.g., grid.php).
3. Paste it into your theme directory under /your-theme/yt-gallery-templates/.
4. Modify the template as needed.

REST API Integration

If your plugin supports a REST API, developers can fetch gallery data programmatically. Example:

Endpoint: /wp-json/yt-gallery/v1/videos

• Parameters:
  • type: Layout type.
  • channel: YouTube channel ID.
  • playlist: YouTube playlist ID.

Fetch Example in JavaScript

javascriptCopy codefetch('/wp-json/yt-gallery/v1/videos?type=grid&channel=CHANNEL_ID')
    .then(response => response.json())
    .then(data => {
        console.log(data); // Process the video data
    });

Custom Extensions

Developers can extend the plugin by building add-ons or integrating it with other plugins. For instance:

• Adding a New Layout: Use the yt_gallery_register_layout action hook to add a custom layout.
• Integrating with Page Builders: Add support for Elementor or WPBakery by registering custom widgets or shortcodes.

Associate Plugins

phpCopy codeadd_action('yt_gallery_register_layout', function ($layouts) { $layouts['custom_layout'] = 'Custom Layout'; return $layouts; });

Recommend other plugins that complement or enhance your plugin:

• SEO Plugins: Improve video metadata visibility.
• Page Builders: Seamless integration with Elementor, WPBakery, or Gutenberg.
• Caching Plugins: Ensure optimal performance for embedded videos.

Request for new features

We are always looking to improve! If you have any suggestions for new features or improvements to the plugin, feel free to reach out to us. Your feedback helps us make Easy Job Listing even better.(Contact form , Telegram, Whatsapp, Messenger)

Donate

If you enjoy using WordPress YouTube Gallery and would like to support its continued development, please consider making a donation. Your contributions will help us add more features, provide regular updates, and continue offering support to all users.