Get & Display Thumbnails For Youtube Videos - jQuery YoutubeCoverPhoto

Get & Display Thumbnails For Youtube Videos - jQuery YoutubeCoverPhoto
File Size: 4.63 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

YoutubeCoverPhoto is a really small jQuery plugin which automatically fetches and displays the highest resolution (or default) thumbnails (cover photos) for your Youtube videos.

How to use it:

1. Add jQuery JavaScript library(slim build) and the jQuery YoutubeCoverPhoto plugin's script to the webpage.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="jquery.youtubecoverphoto.js"></script>

2. Create an empty img tag and specify the Youtube video ID in the data-youtube-id attribute as this:

<img src="" data-youtube-id="PknU1QEV4Zo">

3. Just call the function on the image and the plugin will take care of the rest.

$('img[data-youtube-id]').youtubeCoverPhoto();

4. Fetch and display the default video thumbnail instead:

$('img[data-youtube-id]').youtubeCoverPhoto({
  useMaxRes: false
});

Change log:

2017-07-08

  • Updated background image processing

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