Best jQuery YouTube Plugins & Tutorials with Demo

LazyYT.js : A jQuery plugin to lazy load Youtube videos

LazyYT.js: A jQuery plugin to lazy load Youtube videos

This is a jQuery plugin to lazy load Youtube videos. On the initial load, the div will be replaced by a preview img of the video. On hover, the preview img will be replaced by the iframe Youtube video.

Youtube video embeds were causing an obnoxious lag on every page load. In order to speed things up, we wrote a jQuery plugin called lazyYT.js. While we have done similar custom setups for sites we have built before, we wanted to put together something simple, easy-to-use, and available for anyone.

To speed up the page load LazyYT works by initially loading a preview image, then waiting until the video is actually clicked to load and start the full Youtube video.

jQuery Ultimate Utube Generator Plugin

jQuery Ultimate Utube Generator Plugin

jQuery plugin with tons of settings that allows users to generate embedded youtube videos adjusting almost all imaginable options in an easy way, plus generating fancy playlists and share boxes. Live preview functionality for CMS admin pages will be very handy for generating codes to save in database.

Nivo Lightbox : jQuery Responsive lightbox plugin

Nivo Lightbox : jQuery Responsive lightbox plugin

A simple, flexible, responsive, retina-ready jQuery lightbox plugin.The Nivo Lightbox automatically detects the type of content you are trying to show and loads it correctly. No extra setup required. So no matter if you are trying to show images, image galleries, AJAX, Flash, Youtube or Vimeo videos, another website or just inline HTML, Nivo Lightbox has you covered.

The Nivo Lightbox uses some cutting edge CSS transition effects to make your content display in as beautiful a way as possible. We employ some progressive enhancement to make the lightbox look stunning in newer browsers, but still function correctly in older browser.

VenoBox : Responsive jQuery lightbox plugin

VenoBox : Responsive jQuery lightbox plugin

Just another responsive jQuery lightbox plugin, suitable for images, inline contents, iFrames, Google Maps, Vimeo and YouTube videos.

The big difference compared to many others plugins like this is that VenoBox calculates the max width of the image displayed and preserves its height if is taller than the window (so in small devices you can scroll down the content, avoiding vertical microscopic resized images).

jQuery Responsive YouTube & Vimeo Playlist

jQuery Responsive YouTube & Vimeo Playlist

This responsive video plugin gives you a professional, mobile-friendly solution for streaming online video players on your website. It’s lightweight, cross-browser compatible, and comes with built-in support for YouTube and Vimeo media streaming.

– Supports YouTube & Vimeo streaming by URL. – Build a custom video player with an unlimited number of videos. – Bring videos together from both YouTube and Vimeo under a mobile-friendly, unified player. – Showcase your video media across all platforms and devices.

jQuery Video Lightning

jQuery Video Lightning

Turn any element into a lightbox or popover link for Youtube and Vimeo videos.Includes access to all embed API options for both providers as well as a healthy set of style options.The main one, and the reason we built it, is for quick video explainers in the appropriate places. This little plugin bootstraps getting those helpful little videos in place.

Features:

  • Simple access to all embed API options for both providers
  • Lots of options to customize and beautify your lightboxes
  • Intelligent popover auto positioning gravitates to page center
  • Lazy loading of videos prevents slow page load due to video embeds
  • Rick Roll with ease (don’t pass video id, add rick_roll option to prevent closing)

7 Slider : jQuery Responsive Image Slider

7 Slider : jQuery Responsive Image Slider

7 Slider is one of the most complete image slider ever. It is built in latest jQuery and mobile compatible so anyone can easily use it without any restriction. And it is fully responsive and modern features like Video embed,Lightbox are supported which make it more stunning.

Features:

  • 250+ wonderful animations(2d,3d) – Animations will come more as new version released.
  • Native browser support
  • Html5/Css3 transitions support – It uses html5/css3 transition for modern browsers.
  • Image Overall Loading – 7 Slider loads all images at once so that he/she doesn’t wait again while slides.
  • Image Preview support – 7 Slider provides image preview option on hover.
  • Customizable width and height – Width and height can be set.
  • Fully responsive – It’s fully responsive so it can be attached in touch device.
  • Full width functionality involved – Full width slider is available
  • Lightbox support – It supports lightbox based on users’ demand.
  • Touch device support – Touch events are supported.
  • Mouse swipe navigation support – Swipe functionality is available so users feel comfortable to navigate.
  • Video content support(Youtube,Vimeo) – Embeded videos are supported.

YoutubeTV : jQuery YouTube User/Playlist player

YoutubeTV : jQuery YouTube User/Playlist player

A small, slick, library independent YouTube User/Playlist player.

Features:

  • Library Independent
  • Customizable via CSS
  • Autoplay
  • Remove YouTube Chrome
  • Supports Playlists and Users
  • jQuery Support
  • Module Support

Demos :

PlumTube : Combined power of jQuery and YouTube Video feeds

PlumTube : Combined power of jQuery and YouTube Video feeds

PlumTube utilizes the combined power of jQuery and YouTube API v2.0 video feeds to generate an list of links to videos on a particular YouTube channel or playlist. The output is a clean unordered list element that can be styled as desired, and can also support the addition of modal popup player functionality from plugins such as fancybox.

jQuery Horizontal Gridfolio Pro

jQuery Horizontal Gridfolio Pro

Horizontal Gridfolio Pro is a fully responsive media grid plugin that allows you to display media content with an unique and original layout. It’s perfect for presentations, for anyone that want to obtain a great impact on their visitors.

Horizontal Gridfolio Pro features a large variety of options, it can have any number of categories and each category can have any number of images. When a thumbnail is pressed you can choose either to display an original media lightbox which we have coded, no action or open a webpage. The lightbox can display images, iframe (html pages) and videos loaded from YouTube or Vimeo.

Features:

  • Responsive / Flexible / Fluid layout: the grid can be used with three display types, responsive/fixed, fluid width or fullscreen.
  • Autoscale: The grid can resize it’s height proportional to the width this way on smaller screens it will keep a correct ratio and it will be completely visible (optional).
  • Drag or Scroll Function: The grid can be dragged with the mouse/finger or scrolled like a regular HTML page.
  • Mouse wheel support: The grid can be scrolled with the mouse wheel (optional).