Responsive Youtube Video Gallery Plugin - jQuery YouRam

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.

youram
  -- cache
  -- css
  -- js
  -- php

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

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

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

<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.

$(".youram").youram({

  // Get a API key from Google Console
  apiKey: "API KEY HERE", 
  
  // Format: ["Tab Name1==YouTube link1", "Tab Name2==YouTube link2"]
  //can have as many tabs as you like!
  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"]
  
});

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

$(".youram").youram({


  // Number of videos to fetch per load
  maxResults: 10
  
});

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

$(".youram").youram({


  videoDisplayMode: "inline"
  
});

7. Customize the appearance of the Youtube video gallery.

$(".youram").youram({

  themeColor: "rgb(235, 229, 52)", 
  youramBackgroundColor: "#dadbdb",
  itemBackgroundColor: "#fbfbfb", 
  titleColor: "#383838", 
  controlsTextColor: "#383838",
  titleFontFamily: "B612",
  generalFontFamily: "B612",
  titleFontSize: "0.8",
  titleFontWeight: "bold",
  controlsFontSize: "1",
  controlsFontWeight: "bold",
  
});

8. Customize the responsive breakpoints.

$(".youram").youram({

  responsiveBreakpoints: [600,850,1050,1400]
  
});

9. Cache options.

$(".youram").youram({

  buildCache: false,
  cacheServer: "http://localhost/youram/php/youram-server.php", 
  cacheFolderName: "cache"
  
});

10. Hiding options.

$(".youram").youram({

  hideLoadingMechanism: false,
  hideDuration: false,
  hideThumbnailShadow: false,
  hideTabs: false,
  hideReloadCacheButton: false,
  
});

11. More customization options.

$(".youram").youram({

  // text shown on load more button
  loadMoreText: "<i class=\"fas fa-plus\"></i>&nbsp;&nbsp;Load more videos..",

  // loading text
  loadingText: "loading...",

  // text shown after no more videos remaining to load
  allDoneText: "<i class=\"fas fa-check\"></i>&nbsp;&nbsp;All done..",
  
  // show play icon
  showFixedPlayIcon: true,

  // or circle
  iconShape: "circle",

  // show hover animation
  showHoverAnimation: true
  
});

---

This awesome jQuery plugin is developed by Hanu. For more Advanced Usages, please check the demo page or visit the official website.