jQuery Based Youtube Video Lazy Loader With HD Thumbnail

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:

• Lightweight jQuery Plugin To Lazy Load Youtube Videos - Lazy Loader
• jQuery Plugin To Lazy Load Youtube Videos Until Needed - LazyTube
• Lightweight jQuery Youtube Video Lazy Load Plugin - LazyYT.js

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.