Connecting to YouTube Channel

<!--views/index.ejs-->
<%- include('partials/head') %>
<%- include('partials/facebookapi') %>
<%- include('partials/header') %>

<link rel='stylesheet' href='/stylesheets/index.css' />
<script src='/javascripts/utility.js'></script>

<section class="panel region">
  <script src="https://apis.google.com/js/api.js"></script>
  <script src="/javascripts/index.js"></script>

  <div id="video-screen"></div>
  <div id="navigation">
    <img onclick="index.getVidContent(index.yt_prevPageToken)" src="/images/left.png" />
    <img onclick="index.getVidContent()" src="/images/home.png" />
    <img onclick="index.getVidContent(index.yt_nextPageToken)" src="/images/right.png" />
  </div>
</section>
<section id="main"></section>

<%- include('partials/footer.ejs') %>

// javascripts/index.js
class Index{
  constructor(){
    this.pageTokens = [];
    this.apiKey = 'AIzaSyCDMr6toQGyDRFPChRsbQ2sheSQfTQLVqg';

    this.kplaylistId = 'UUQfwfsi5VrQ8yKZ-UWmAEFg';
    this.yt_nextPageToken = false;
    this.yt_prevPageToken = false;
    this.kclicked = false;
    this.kPlaylistt = [];
    this.kPlaylist = [];
    this.created = false;
    this.videoIds = [];

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  getVidContent(pageToken) {
    index.option = {
      "part": ["snippet,contentDetails"],
      "playlistId": index.kplaylistId,
      "maxResults": 5
    }

    if(pageToken)
      index.option.pageToken = pageToken;

    gapi.client.init({
      'apiKey': index.apiKey,
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
    }).then(function() {
      return gapi.client.youtube.playlistItems.list(index.option);
    }).then(function(response) {
      index.yt_nextPageToken = response.result.nextPageToken;  
      index.yt_prevPageToken = response.result.prevPageToken;
      index.getVidData(response.result.items);
    }, function(reason) {
      console.log('Error: ' + reason.result.error.message);
    });
  }

  getVidData(items){
    this.videoIds = [];
    for(var v in items){
      this.videoIds.push(items[v].snippet.resourceId.videoId);
    }
    this.createPlayer();
  }

  createPlayer(){
    var html = ``;
    
    for(var v in this.videoIds){
      html += `<div>`;
      html += `<iframe src="https://www.youtube.com/embed/${this.videoIds[v]}"></iframe>`;
      html += `</div>`;
    }
    $('.panel #video-screen').html(html);
  }

}//end class

const index = new Index();

function initAPI() {
  index.getVidContent();
}

gapi.load('client', initAPI);

/* public/stylesheets/index.csss */
*{
  padding:0;
  margin:0;
  box-sizing: border-box;
}
body{
  font:14px Vidaloka, OdorMeanChey;
}
a{
  color:#e20000;
  text-decoration: none;
}
a:hover{
  opacity:.7;
}
.region{
  max-width: 1100px;
  margin:0 auto;
}
#header{
  background:#e20000;
  color:white;
}
#header .top-menu-outer{
  padding:5px 0;
  border-bottom: 5px solid black;
}
#header .top-menu{
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
}
#header .top-menu .time{
  text-align: right;
}
#header .title-outer{
  background: #3d3d3d;
  padding: 10px 0;
}
#header .site-title{
  display: grid;
  grid-template-columns:auto auto auto;
  align-items: center;
  font:50px/1.75 Anton, Moul;
  text-shadow:0px 0px 0 rgb(231,231,231), 
  1px 1px 0 rgb(216,216,216), 
  2px 2px 0 rgb(202,202,202), 
  3px 3px 0 rgb(187,187,187), 
  4px 4px 0 rgb(173,173,173), 
  5px 5px 0 rgb(158,158,158), 
  6px 6px 0 rgb(144,144,144), 
  7px 7px 6px rgba(0,0,0,0.6), 
  7px 7px 1px rgba(0,0,0,0.5), 
  0px 0px 6px rgba(0,0,0,.2);
}
#header .site-title a{
  color:white;
}
#header .site-title img{
  width: 150px;
}
#header .site-title .tvlive{
  float: right;
}
#header .site-title .news{
  margin: 0 auto;
  width:120px;
}
#header .main-menu-outer{
  background: black;
}
.topnav {
  background-color:transparent;
  overflow: hidden;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
  font: 16px/1.5 Oswald, Bayon;
}
.topnav #house{
  padding-top:0;
  padding-bottom:10px;
}
.topnav #house img{
  width: 40px;
  position: relative;
  top:5px;
}
.topnav a:hover {
  background-color:rgb(34, 34, 34);
}
.topnav a.active {
  background-color: rgb(46, 46, 46);
  color: white;
}
.topnav .icon {
  display: none;
}
.panel{
  background:lightgrey;
  margin-top: 30px;
  border-radius:4px;
}
.panel #video-screen{
  display:grid;
  grid-template-columns:auto auto auto auto auto auto;
  grid-gap:15px;
  padding:15px;
}
.panel #video-screen div{
  position:relative;
  padding-top:56.25%;
}
.panel #video-screen div:nth-child(1){
  grid-column: 1 / span 3;
}
.panel #video-screen div:nth-child(2){
  grid-column: 4 / span 3;
}
.panel #video-screen div:nth-child(3){
  grid-column: 1 / span 2;
}
.panel #video-screen div:nth-child(4){
  grid-column: 3 / span 2;
}
.panel #video-screen div:nth-child(5){
  grid-column: 5 / span 2;
}
.panel #video-screen iframe{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-width:0;
}
.panel #navigation{
  text-align: center;
  padding-bottom:5px;
}
.panel #navigation img{
  height:25px;
}
.panel #navigation img:hover{
  opacity:.5;
  cursor:pointer;
}
.footer{
  padding: 30px 0;
  text-align:center;
}
@media only screen and (max-width:600px){
  #header .top-menu{
    padding: 0 10px;
    grid-template-columns: 100%;
  }
  #header .top-menu span,
  #header .top-menu .time{
    text-align:center;
  }
  #header .site-title{
    grid-template-columns:100%;
    text-align:center;
  }
  #header .site-title .tvlive{
    float: none;
  }
  #header .site-title .news{
    margin: 10px auto;
  }
  .panel #video-screen{
    grid-template-columns: 100%;
  }
  .panel #video-screen div:nth-child(1){
    grid-column: 1 / span 1;
  }
  .panel #video-screen div:nth-child(2){
    grid-column: 1 / span 1;
  }
  .panel #video-screen div:nth-child(3){
    grid-column: 1 / span 1;
  }
  .panel #video-screen div:nth-child(4){
    grid-column: 1 / span 1;
  }
  .panel #video-screen div:nth-child(5){
    grid-column: 1 / span 1;
  }
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

GitHub: "https://github.com/Sokhavuth/multimedia
Heroku: https://khmerweb-multimedia.herokuapp.com/