jQuery Based Youtube Video Lazy Loader With HD Thumbnail

jQuery Based Youtube Video Lazy Loader With HD Thumbnail
File Size: 7.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

YouTube.HD.Thumbnail.js is a lightweight jQuery Youtube video lazy loader plugin that displays the high quality thumbnail of your Youtube video, and then fetches and loads the Youtube iframe player only when the thumbnail is clicked.

See also:

How to use it:

1. Load the latest version of jQuery library and other required resources in your html page.

<link rel="stylesheet" href="css/YouTube.HD.Thumbnail.css">
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jQuery.YouTube.HD.Thumbnail.js"></script>

2. Embed an Youtube video into your page as usual.

<iframe class="yt-hd-thumbnail" width="853" height="480" src="https://www.youtube.com/embed/DVabBY-NXRg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

3. Just call the function on the Youtube iframe player and we're done.

$('iframe.yt-hd-thumbnail').youTubeHDThumbnail();

4. Add a subtle hover effect to the thumbnail.

$('iframe.yt-hd-thumbnail').youTubeHDThumbnail({
  darkenThumbnail: true
});

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