Youtube Gallery Elementor Widget

Thank you for purchase of this plugin. If you have any questions that are beyond the scope of this help file, please feel free to send a detailed message on the following link.

• codecanyon.net/user/Tean

How to install

Make sure you extract downloaded file from codecanyon, inside you will find file named: 'elementor_youtube_gallery.zip'. This is the plugin file you upload in WordPress panel!

Activate plugin

After you install plugin you will have to activate your license to start using the plugin.

To activate license you need to create account on the following link, where you will provide your PURCHASE CODE, and get TOKEN in return which you will then enter in plugin section to activate the plugin.

Instructions how to register

Access control panel here

This is made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses to easily track on which server licenses are being used.

How to update

How to insert gallery in page?

1. Search for Youtube gallery in Elementor widgets:

2. Add your Youtube api key in Gallery style tab:

3. In Video sources tab Add item, choose Youtube source and add url (ONLY ID part, not full url) and source title.

This is minimum required for gallery to run. After that you can adjust other details.

Gallery layout can be grid or player with playlist on the right or bottom.

Grid layout

For Grid layout you can set number of columns and rows for different screen sizes in Breakpoints

You can also set Video display type, meaning how to display the video when the grid item thumbnail is clicked. Possible values are lightbox, inline, link and none.

Player layout

For Player layout you can choose to display playlist items in vertical layout right of the player (which on small screens becomes horizontal layout below the player) and in horizontal layout below the player.

Video will always play in the player when the thumbnail item is clicked (there is no lightbox option with player layout like in Grid layout).

Gallery structure

Gallery consists of of a header image, area beneath the header (called header content) and the player area with video (or grid, if the grid layout is chosen).

You can remove header and header content parts (or any item within) in Gallery style tab:

Playlist shelf displays user playlists in page and then shows playlist videos in lightbox. Playlist shelf accepts only Youtube channel as source.

To use playlist shelf, choose Playlist shelf as Gallery type in Gallery style tab:

Gallery supports Youtube channels and playlists. You can have any number of channels and playlists shown in the gallery (one at the time). To add new video source, go to Video source tab and choose Add item. Make sure you enter ONLY ID part of your channel or playlist in url field, not full url!

So for example, if this is your channel:

https://www.youtube.com/channel/UCUhFaUpnq31m6TNX2VKVSVA

enter ony this part in the field:

UCUhFaUpnq31m6TNX2VKVSVA

Use playlist selector

If you have more than single video source in the gallery, choose Use playlist selector and this will be shown above the player area. With this feature you can change Youtube channel or playlist in the gallery directly.

Show default subtitle language on start

If your videos have multiple subtitles languages, you can force to show chosen subtitle language using Default subtitle language parameter.

Use language code value:

Note that the list above is not correct in all cases, for example using Chinese requires following codes:

zh-Hans (Chinese Simplified)
zh-Hant (Chinese Traditional)

Localized title and description

If your videos have localized title and description, you can show them in your chosen language using Language code parameter:

Use language code (BCP-47) value:

How to translate title and description for your Youtube videos:

Display search field above the gallery

Once youtube source is loaded (playlist or channel), videos can be searched using a search field.

Enable search field in Gallery style tab

Show featured videos above main gallery

Enable featured videos in Featured video tab

Select to show number of latest videos from youtube source that is loaded inside the gallery.

Alternatively, if you want to show specific youtube video(s), add one or more Youtube video IDs separated by comma.

How to restrict videos from showing in the gallery?

Method 1 - restrict by video ID

When adding video source in Video sources tab, add Exclude videos (one or more video IDs to exclude separated by comma):

Method 2 - hide shorts from showing (short videos)

Use Hide Youtube shorts setting in Gallery manager / Gallery style tab

Method 3 - show only shorts (short videos)

Works with youtube channel

Use Show only Youtube shorts setting in Gallery manager / Gallery style tab

Retrict certain videos from user and show popup window notice

When adding video source in Video sources tab, add Restrict videos (one or more video IDs to restrict separated by comma):

Popup settings (content which opens when user tries to access restricted video):

Adjust settings for popup window in Restrict content tab:

Inside Colors tab you can choose gallery skin to use and change some gallery colors

Note that changing skin or colors sometimes might not work properly in Elementor editor and that you always need to test end results on the front page!

To play video when mouse is over the thumbnail area use this option in Gallery style tab:

Its possible to display Youtube player with custom skin instead of Youtube default one. This can be adjusted in Youtube player custom skin tab:

Note that this method does not provide an option to show Youtube subtitles.

When you click on the thumbnail video can be shown in the following ways (this only applies for the Grid layout):

1. In lightbox popup:

Click on the thumbnail will open lightbox:

2. Inline inside thumbnail:

Click on the thumbnail will play video inside thumbnail:

3. As a "link", clicking the thumbnail can open this video on Youtube.

4. No action, clicking the thumbnail will do nothing.

These settings can be adjusted in Grid layout tab:

How to use custom banner image, logo, channel description?

Channel logo, title and description will automatically be retrieved from Youtube. If you want to specify your own instead you can specify them in Gallery style tab:

Note that from last Youtube change, its not possible to retrieve banner image for Youtube channel automatically. So if you want to have banner image you need to specify it manually in Gallery style tab:

How to create scale thumbnail effect on hover?

Use these settings in Gallery style tab:

Note that this effect is only available on desktop browsers.

Show full video description

Create info button over thumbnail area which when clicked will show full video description in popup window.

Adjust settings in Playlist items tab:

Option to autoplay in viewport for player layouts

Autoplay in viewport is available with player layouts when player is shown directly in the page (not opened in lightbox).

Adjust settings for Autoplay viewport in Autoplay in viewport tab:

Changing gallery icons

Icons in the gallery are SVG. Adjust settings for Gallery icons in Gallery icons tab:

Insert advertising content into the gallery (Adsense, Amazon Affiliates, Commission Junction etc...). Basically any HTML is allowed. Make sure its properly formatted so it doesnt break the layout.

Use Advert tab to advertizing content to the gallery. You can add ad content that will be placed in the gallery below the grid. You can also add ad content that will be placed in the video popup window in lightbox.

Example of AdSense code to add:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="AD_CLIENT_HERE"
data-ad-slot="AD_SLOT_HERE"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Replace AD_CLIENT_HERE and AD_SLOT_HERE data.

You can translate gallery strings inside Translation tab:

Other translate options are available in relevant tabs, like Social sharing or Youtube player custom skin tab.

Adjust social sharing and which networks to use in Social sharing tab:

Always test gallery in real page, not in Elementor editor

Make sure you test gallery in the real page on the frontend, not in Elementor editor, because some features might not work correctly in editor!

Autoplay

The only way to autoplay is to start video muted, so if auto play is chosen, video will start muted.

Volume on mobile

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript

Plugin does not work as expected

If the plugin does not work as expected, try the following tests to see if it makes a difference and what could be causing an issue:

1. Update to latest plugin files available on Codecanyon

2. Switch to default Wordpress theme

3. Check for errors in browser developer console (Chrome F12 key, Console tab)

4. Try to deactivate any 3rd party plugins (the ones that not come with Wordpress)

5. If you still have issues after you have done all changes above, you can send a message at http://codecanyon.net/user/Tean#contact , provide your PURCHASE KEY and a link to your live page so we can have a look.