youtube video gallery youram - Free Download Responsive Youtube Video Gallery Plugin - jQuery YouRam

Free Download Responsive Youtube Video Gallery Plugin – jQuery YouRam

By Posted on

This time I will share jQuery Plugin and tutorial about Responsive Youtube Video Gallery Plugin – jQuery YouRam, hope it will help you in programming stack.

youtube video gallery youram - Free Download Responsive Youtube Video Gallery Plugin - jQuery YouRam
File Size: 247 KB
Views Total: 4010
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

YouRam is a jQuery plugin that helps you generate a responsive Youtube video gallery from any Youtube Channel, User, or Playlist.

Clicking any video thumbnail in the gallery will open and play the Youtube video in a lightbox popup. Users are also able to switch between videos by clicking the prev/next buttons.

The plugin also provides a cache functionality to avoid multiple API calls to YouTube. Cached data is saved inside the plugin folder on your server.

More Features:

  • Limits the max number of videos to display.
  • Provides a Load More button to load more videos into the gallery.
  • Custom loading indicator & loading text.
  • Custom Play icon and hover animation.

How to use it:

1. Download and upload the following folders to the server.

view source
1 youram
2   -- cache
3   -- css
4   -- js
5   -- php

2. Load the necessary JavaScript and CSS files in the document.

view source
1 <link href="/path/to/css/youram.min.css" rel="stylesheet" />
2 <script src="/path/to/cdn/jquery.min.js"></script>
3 <script src="/path/to/js/youram.min.js"></script>

3. Create a container element to hold the Youtube video gallery.

view source
1 <div id="yram" class="youram"></div>

4. Call the function on the container, insert your Youtube API Key, and define an array of YouTube playlist or channel links separated by comma.

view source
01 $(".youram").youram({
02  
03   // Get a API key from Google Console
04   apiKey: "API KEY HERE",
05    
06   // Format: ["Tab Name1==YouTube link1", "Tab Name2==YouTube link2"]
07   //can have as many tabs as you like!
08   sourceLinks: ["My Videos==https://www.youtube.com/channel/UC9trsD1jCTXXtN3xIOIU8gg", "Playlist==https://www.youtube.com/watch?v=aZNUTQeiDac&list=PLJYf0JdTApCrXTrhMzcVGCt0M2IbMjFQJ", "Channel Videos==https://www.youtube.com/user/MARVEL"]
09    
10 });

5. Determine the max number of videos to display on page load.

view source
1 $(".youram").youram({
2  
3  
4   // Number of videos to fetch per load
5   maxResults: 10
6    
7 });

6. Determine the display mode: popup, inline, or link.

view source
1 $(".youram").youram({
2  
3  
4   videoDisplayMode: "inline"
5    
6 });

7. Customize the appearance of the Youtube video gallery.

view source
01 $(".youram").youram({
02  
03   themeColor: "rgb(235, 229, 52)",
04   youramBackgroundColor: "#dadbdb",
05   itemBackgroundColor: "#fbfbfb",
06   titleColor: "#383838",
07   controlsTextColor: "#383838",
08   titleFontFamily: "B612",
09   generalFontFamily: "B612",
10   titleFontSize: "0.8",
11   titleFontWeight: "bold",
12   controlsFontSize: "1",
13   controlsFontWeight: "bold",
14    
15 });

8. Customize the responsive breakpoints.

view source
1 $(".youram").youram({
2  
3   responsiveBreakpoints: [600,850,1050,1400]
4    
5 });

9. Cache options.

view source
1 $(".youram").youram({
2  
3   buildCache: false,
4   cacheServer: "http://localhost/youram/php/youram-server.php",
5   cacheFolderName: "cache"
6    
7 });

10. Hiding options.

view source
1 $(".youram").youram({
2  
3   hideLoadingMechanism: false,
4   hideDuration: false,
5   hide<a href="https://www.jqueryscript.net/tags.php?/Thumbnail/">Thumbnail</a>Shadow: false,
6   hideTabs: false,
7   hideReloadCacheButton: false,
8    
9 });

11. More customization options.

view source
01 $(".youram").youram({
02  
03   // text shown on load more button
04   loadMoreText: "<i class="fas fa-plus""></i>&nbsp;&nbsp;Load more videos..""

Related posts: