Youtube VideoList Gallery

Download

Downloading the Extension

Email : After purchasing the extension from our store, you will receive an email with the link to download the extension.

Store : You can also download the extension from the Downloads section of our store. If you are new to our store, then you have to first create an account using the same email address which you have used while purchasing the extension.

Click to download the extension package - mod_youtube_gallery.zip

System Requirements

• Joomla 4.x, 5.x, or 6.x (Joomla 3 support has been discontinued)
• PHP 8.0 or higher
• Modern web browser (Chrome, Firefox, Safari, Edge)

Installation

Install the Extension

• Login to the backend of your Joomla website.
• Go to System > Install > Extensions
• Drag and drop the mod_youtube_gallery.zip file or click browse to select the file
• Click on Upload and Install
• The success message will appear after installation is completed.
• Go to Content > Site Modules to create a new module instance

Note: This module is compatible with Joomla 4, 5, and 6 only. Joomla 3 support has been discontinued.

Layout and Display

Layout Settings

• Suggestions Position : Choose where to display video suggestions - Right or Left side of the main player (YouTube-style layout)
• Container Height (px) : Set the height of the main container in pixels. This controls the overall height of the player and suggestions area. Example: 600 (means 600px). Don't mention px in the field.
• Player Width (%) : Set the width of the video player as a percentage. Example: 70 (means 70%). Height will be calculated automatically based on 16:9 aspect ratio.
• Suggestions Width (%) : Set the width of the suggestions area as a percentage. Example: 30 (means 30%)

Display Options

• Show Title : Enable or disable the video title display in the suggestions panel
• Enable Video Search : Allow users to search videos by title. When enabled, a search input appears above the suggestions list

Video Playback Settings

• Enable Autoplay : Enable or disable autoplay. Note: Modern browsers require videos to be muted for autoplay to work. Users can manually unmute after playback starts.
• Show Related Videos : Show or hide related videos at the end of playback
• Allow Fullscreen : Enable or disable fullscreen mode
• Loop Mode : Choose how videos should loop - Disabled, Loop Single Video, or Loop Entire Playlist
• Mute on Autoplay : Mute video by default when autoplay is enabled. This is required for autoplay to work in modern browsers (Chrome, Firefox, Safari, Edge) due to browser autoplay policies

Slide Settings

Adding Videos

Click on the Add button to add new videos. The module features automatic title and thumbnail fetching from YouTube URLs.

• Video URL : Enter the complete YouTube video URL. Example: https://www.youtube.com/watch?v=v7K4vGYL9zI
• Auto-fill Feature : When you paste a YouTube URL, the module automatically:
  • Fetches the video title from YouTube
  • Displays the video thumbnail preview
  • Fills in the title field automatically
• Start Time : You can include start time in the URL using ?t=30s or &t=30s parameter. Example: https://www.youtube.com/watch?v=VIDEO_ID&t=30s
• End Time : You can include end time in the URL using &end=120 parameter. Example: https://www.youtube.com/watch?v=VIDEO_ID&end=120

Note: You can add any number of videos to the module. The title and thumbnail fields will appear automatically once you paste the URL.

Styling Settings

Container Styling

• Container Background Color : Select the background color of the container using the color picker
• Container Padding : Enter padding in pixels (e.g., 10 or 10 20 for top/bottom left/right). Don't mention px
• Container Margin : Enter margin in pixels (e.g., 10 or 10 20). Don't mention px
• Container Border Width : Enter border width in pixels. Don't mention px
• Container Border Color : Select the border color
• Container Border Radius : Enter border radius in pixels. Don't mention px
• Container Box Shadow : Enter box shadow (e.g., 0 2px 4px rgba(0,0,0,0.1))

Suggestion Item Styling

• Suggestion Item Background : Select the background color of suggestion items
• Suggestion Item Hover Background : Select the hover background color
• Suggestion Item Padding : Enter padding in pixels. Don't mention px
• Suggestion Item Margin : Enter margin in pixels (e.g., 0 0 8 0). Don't mention px
• Suggestion Item Border Width : Enter border width in pixels. Don't mention px
• Suggestion Item Border Color : Select the border color
• Suggestion Item Border Radius : Enter border radius in pixels. Don't mention px
• Suggestion Item Box Shadow : Enter box shadow

Thumbnail Styling

• Thumbnail Width : Enter thumbnail width in pixels. Example: 168 (means 168px). Don't mention px
• Thumbnail Height : Enter thumbnail height in pixels. Example: 94 (means 94px). Don't mention px
• Thumbnail Border Radius : Enter border radius in pixels. Don't mention px
• Thumbnail Margin : Enter margin in pixels (e.g., 0 8px 0 0). Don't mention px

Title Styling (when Show Title is enabled)

• Title Font Family : Choose User Defined or Google Font
• Font : Enter the font name. For Google Fonts, choose from Google Fonts (e.g., Open Sans, Raleway)
• Title Font Size : Enter font size in pixels. Example: 14 (means 14px). Don't mention px
• Title Font Weight : Select font weight (100-900)
• Title Font Color : Select the font color
• Title Line Height : Enter line height (e.g., 1.4 or 20px)
• Title Margin : Enter margin in pixels (e.g., 0 0 4px 0). Don't mention px

Search Input Styling (when Enable Video Search is enabled)

• Search Input Background : Select the background color
• Search Input Text Color : Select the text color
• Search Input Border Color : Select the border color
• Search Input Padding : Enter padding (e.g., 8px 12px)
• Search Input Border Radius : Enter border radius in pixels. Don't mention px
• Search Input Margin : Enter margin in pixels (e.g., 0 0 12px 0). Don't mention px

Advanced

Advanced Settings

• Module Class Suffix : Add a custom CSS class suffix to the module for additional styling. This allows you to target the module with custom CSS without modifying core files
• Add Extra CSS : Add custom CSS code to further customize the module appearance. This CSS will be added to the page when the module is displayed

Update System

• Automatic Updates : The module includes an update server URL for automatic updates. Make sure your Joomla installation can connect to the update server
• Manual Updates : You can also manually update by installing the new version through the Extension Manager

Note: Always backup your site before updating extensions.

Features

Key Features

• YouTube-Style Layout : Display video suggestions on the right or left side of the main player, just like YouTube's interface
• Auto-fill from URL : Automatically fetch video title and thumbnail when you paste a YouTube URL
• Video Search : Enable search functionality to help users find videos by title
• Fully Customizable CSS : Control every aspect of styling including container, suggestion items, thumbnails, titles, and search input
• Video Playback Controls : Autoplay, loop mode, mute, fullscreen, and related videos options
• Responsive Design : Fully responsive layout that works perfectly on desktop, tablet, and mobile devices
• Interactive Gallery : Clickable thumbnails with smooth transitions and loading spinner
• Joomla 4, 5 & 6 Compatible : Built for modern Joomla versions with PHP 8.0+ support
• Modern Code : Uses OOP JavaScript, CSS variables, flexbox, and modern web standards

Browser Compatibility

The module works with all modern browsers including Chrome, Firefox, Safari, and Edge. Autoplay requires videos to be muted in modern browsers due to browser autoplay policies.