jQuery Plugin For lazy Loading Youtube Videos - youCover

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:

• Get & Display Thumbnails For Youtube Videos - jQuery YoutubeCoverPhoto
• jQuery Based Youtube Video Lazy Loader With HD Thumbnail
• jQuery Plugin To Lazy Load Youtube Videos Until Needed - LazyTube
• jQuery Plugin For Youtube & Vimeo Video Previews - PreVideoLoad
• jQuery Plugin To Create Animated Youtube Thumbnails - PreViewTube.js
• Lightweight jQuery Plugin To Lazy Load Youtube Videos - Lazy Loader
• Lightweight jQuery Youtube Video Lazy Load Plugin - LazyYT.js
• Load And Play Youtube/Vimeo Videos When Needed - embedvideos

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>

Changelog:

2018-08-20

• Bugfix

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.