jQuery Plugin For lazy Loading Youtube Videos - youCover

jQuery Plugin For lazy Loading Youtube Videos - youCover
File Size: 84.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

youCover is a Youtube lazy loader plugin with jQuery that replaces the default Youtube iframe player with its cover image and loads actual YouTube videos ONLY when needed (click the thumbnail). Easy to integrate with fancybox to create a fancy Youtube Video Lightbox/Gallery.

The plugin also has the ability to detect the current screen width and auto disable Autoplay on mobile devices.

See also:

How to use it:

1. Include jQuery JavaScript library and the jQuery youCover plugin's files on the web page.

<link rel="stylesheet" href="youCover.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="youCover.js"></script>

2. Embed a Youtube video into the webpage using the following data attributes:

  • data-youcover: required
  • data-width: width of the Youtube player 
  • data-height: height of the Youtube player 
  • data-src: video source
  • data-wrapperclass: custom CSS classes
  • data-id: Video ID (instead of data-src)
  • data-allowfullscreen: allow fullscreen
<div data-youcover 
     data-width="100%" 
     data-height="640" 
     data-src='https://www.youtube.com/embed/BEtPCT7ZcE0?rel=0&amp;showinfo=0&amp;autoplay=1' 
     data-wrapperclass='youCover custom'
     <!-- data-id='3BhkeY974Rg' -->
     data-allowfullscreen>
</div>

3. To create a Youtube Video Lightbox/Gallery using fancybox plugin:

<link rel="stylesheet" href="jquery.fancybox.min.css">
<script src="jquery.fancybox.min.js"></script>
<div data-youcover data-fancybox data-id='MGgr62ZrfdU' data-rel='galery'></div>
<div data-youcover data-fancybox data-id='ocwnns57cYQ' data-rel='galery'></div>
<div data-youcover data-fancybox data-id='xD7D5ZN1pro' data-rel='galery'></div>

About Author:

Author: kiaonline

Website: https://github.com/kiaonline/youCover


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