This time I will share jQuery Plugin and tutorial about jQuery Plugin For lazy Loading Youtube Videos – youCover, hope it will help you in programming stack.
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.
How to use it:
1. Include jQuery JavaScript library and the jQuery youCover plugin’s files on the web page.
1 |
<link rel="stylesheet" href="youCover.css"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<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
5 |
data-wrapperclass='youCover custom' |
3. To create a Youtube Video Lightbox/Gallery using fancybox plugin:
1 |
<link rel="stylesheet" href="jquery.fancybox.min.css"> |
2 |
<script src="jquery.fancybox.min.js"></script> |
1 |
<div data-youcover data-fancybox data-id='MGgr62ZrfdU' data-rel='galery'></div> |
2 |
<div data-youcover data-fancybox data-id='ocwnns57cYQ' data-rel='galery'></div> |
3 |
<div data-youcover data-fancybox data-id='xD7D5ZN1pro' data-rel='galery'></div> |
Changelog:
2018-08-20
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.
