jQuery Plugin To Replace Youtube Links With Thumbnails - shyt.js

File Size: 3.86 KB
Views Total: 1302
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Replace Youtube Links With Thumbnails - shyt.js

shyt.js is a lightweight and easy-to-use jQuery plugin which gets and displays video thumbnails to replace the regular Youtube links. 

How to use it:

1. To use this plugin, you must get an Youtube Data API key from the Google Developers Console.

2. Place both jQuery library and the shyt.js script right before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/shyt.js"></script>

3. Call the function on the Youtube video links and insert your own Youtube API key.

$('a.ytvideo').shyt({
  API_KEY: 'YOUR API KEY HERE'
});

4. Specify the quality of the thumbnail you want to fetch from an Youtube video.

$('a.ytvideo').shyt({
  API_KEY: 'YOUR API KEY HERE'
  size: "medium", // default, high, standard, maxres
});

5. You can also apply the plugin to any DIV element using HTML5 data attribute as follows:

<div data-yt-link="https://www.youtube.com/watch?v=YZHhfW6sbGQ"></div>
$('div').shyt({
  API_KEY: 'YOUR API KEY HERE'
  size: "medium", 
  attribute: "data-yt-link",
  wrap: true
});

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