jQuery Plugin To Display An Youtube Channel Playlist
File Size: | 9.83 KB |
---|---|
Views Total: | 11244 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple jQuery plugin which allows you to retrieve and display a playlist from any Youtube user/channel.
How to use it:
1. Include the jQuery library and the ycp.js
script in the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="ycp.js"></script>
2. Add DIVs as shown below in you HTML. This will contain the Youtube Channel Playlist widget and display the recent videos.
<div id="ibacordotcom-content"> <div class="ibacordotcom-unit ibacordotcom-vid-kenca"> <div class="ibacordotcom_vid_play"></div> </div> <div class = "ibacordotcom-unit ibacordotcom-vid-katuhu"> <div class="ibacordotcom_youtube_channels"></div> </div> </div>
3. Add custom styles for the playlist or you can include the style.css directly in the head section of your web page.
<link rel="stylesheet" href="style.css">
4. Register and get your Youtube API key here and then insert your key into the ycp.js
apikey='AIzaSyCj2GrDSBy6ISeGg3aWUM4mn3izlA1wgt0';
5. Specify which Youtube channel you would like to display.
var channels_name='vice', channels_title='Vice playlist', // custom title
6. All config options.
$(".demo").ycp({( apikey : 'xxxxxxxxxxxxxxxx', autoplay : false, related : false );
Changelog:
2018-09-17
- v07
2017-07-11
- v06
2017-06-23
- fix privacyStatus
2017-05-10
- JS & CSS update
2017-03-15
- v06
2016-12-29
- fix https mode
2016-11-30
- v05
2016-11-24
- change iframe to object
2016-11-08
- fix Embed Videos without Increasing Page Size
2016-09-11
- v04: fix video title white-space
2016-08-20
- v03
2016-02-03
- add maxResults
2016-01-15
- add maxResults
2016-01-14
- add autoplay
2015-07-16
- Update ycp.js
2015-07-09
- fix channels_name by id
2015-05-12
- Update youtube API v3
2015-03-11
- fixed bug
2015-01-28
- Update ycp.js
This awesome jQuery plugin is developed by bachors. For more Advanced Usages, please check the demo page or visit the official website.