Home is for the experience. Projects are for the ones who are interested!

How To Implement Youtube Playlist Player With jQuery

How To Implement Youtube Playlist Player With jQuery

With the following code you will be able to create youtube playlist player using just few lines of javascript. You need to provide your chanel id and playlist id, you can get them from url when you open up your chanel in youtube. The script is very easy to use and you can implement as many playlist you want. You can implement this functionality using wordpress especially if you use ACF, because you can create the fields for playlist and channel id, so you will can change them from admin,

First you need to go on github page and download the requeired scripts to run the playlist. 

After you download the scripts use the following script to load the playlist, I will show you here the scripts you need to get from github too.

<script type="text/javascript" id="www-widgetapi-script" src="//s.ytimg.com/yts/jsbin/www-widgetapi-vfllf5xrd/www-widgetapi.js" async=""></script>
<script src="//www.youtube.com/iframe_api"></script>
<script type="text/javascript" src="<?=get_template_directory_uri();?>/assets/js/ytv.js"></script>
<script type="text/javascript">
  window.onload = function(){
    window.controller = new YTV('playlist_player', {
      channelId: 'chanel id',
      playlist:'playlist id',
      accent: '#008D54',
      browsePlaylists: true,
      controls: false,
      autoplay: false
    });
  };
</script>

The above will create a nice playlist player in your page, it work on mobile devices too. 

Leave a Reply

Your email address will not be published. Required fields are marked *