Youtube Playlist Module

A web based javascript module for displaying youtube playlists.

Installation

npm install youtube-playlist-module -S

Initiate Module

Follow these instructions to get your YouTube API Key: YouTube Data API Overview

<div
  class="playlist-1"
  data-playlist="PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84"
></div>

import YoutubePlaylistModule from "youtube-playlist-module";

// Where '##########' is your YouTube API Key.
const playlist_element = document.getElementsByClassName("playlist-1");
const playlist_1 = new YoutubePlaylistModule({
  api_key: "##########",
  element: playlist_element,
  max_results: 20,
  query_options: {
    showinfo: 0,
    autoplay: 1,
    rel: 0
  }
});
playlist_1.init();

For a list of values to pass into query_options, review the supported paramaters: YouTube Embedded Players and Player Parameters

Initialize Using Element ID

const playlist_2 = new YoutubePlaylistModule({
  api_key: "##########",
  element: document.getElementById("playlist-2"),
  playlist_id: "PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84"
});
playlist_2.init();

Extend Module

class YoutubePlaylistModuleCustom extends YoutubePlaylistModule {
  playlist_items_template(data) {
    const date = new Date(data.snippet.publishedAt).toISOString().split("T")[0];

    return `<li>
      <a class="ypm_video_items" href="#" data-id="${data.snippet.resourceId.videoId}">
        <p>
          ${date} <br/> <br/>
          ${data.snippet.description}
        </p>
      </a>
    </li>`;
  }
}

const playlist_3 = new YoutubePlaylistModuleCustom({
  api_key: "##########",
  element: document.getElementById("playlist-3"),
  max_results: 20,
  query_options: {
    autoplay: 1
  },
  playlist_id: "PLLnpHn493BHFTDL9M1PKnxQwBwOZ8J-h4"
});
playlist_3.init();

Note: If you are using babel to transpile your scripts, extending this class might not work. The only solution I know of would be to include this module within your scripts and to not import it from npm.

Styles

To import the styles using SCSS

@import "youtube-playlist-module/app/components/styles/styles";

• or you can grab the CSS file from the distribution directory.
• or you can styles the module yourself.

Contact

• Twitter: https://twitter.com/BlakeCerecero
• Portfolio: http://digitalblake.com/

This content is released under the MIT License.