class Channel{
  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 = [];
  }

  getVidContent(pageToken) {
    $('#navigation img').eq(1).attr('src', '/images/loading.gif')
    channel.option = {
      "part": ["snippet,contentDetails"],
      "playlistId": channel.kplaylistId,
      "maxResults": 5
    }

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

    window.gapi.client.init({
      'apiKey': channel.apiKey,
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
    }).then(function() {
      return window.gapi.client.youtube.playlistItems.list(channel.option);
    }).then(function(response) {
      channel.yt_nextPageToken = response.result.nextPageToken;  
      channel.yt_prevPageToken = response.result.prevPageToken;
      channel.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 allowfullscreen src="https://www.youtube.com/embed/${this.videoIds[v]}"></iframe>`;
      html += `</div>`;
    }
    $('.Screen').html(html);
    //$('#navigation img').eq(1).attr('src', '/images/home.png')
  }

}//end class

const channel = new Channel();

<link href='/styles/channel.css' rel='stylesheet' />
<div class='Channel region'>

<div class="Navigation">
    <img onClick="channel.getVidContent(channel.yt_prevPageToken)" src="/images/green_left.png" />
    <img onClick="channel.getVidContent()" src='/images/green_home.png' />
    <img onClick="channel.getVidContent(channel.yt_nextPageToken)" src="/images/green_right.png" />
</div>

<div class='Screen'></div>

<script src='/scripts/channel.js'></script>

<script>
const script = document.createElement("script")
    script.src = "https://apis.google.com/js/client.js"
    script.onload = () => {
      window.gapi.load('client', () => {
        channel.getVidContent()
      })
    }

    document.body.appendChild(script)
</script>

</div>

.Screen{
    margin: 0 0 20px;
    background: var(--background-dark);
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-gap: 15px;
    padding: 15px;
}

.Screen div{
    position:relative;
    padding-top:56.25%;
}

.Screen div iframe{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-width:0;
}

.Screen div:nth-child(1){
    grid-column: 1 / span 3;
}

.Screen  div:nth-child(2){
    grid-column: 4 / span 3;
}

.Screen  div:nth-child(3){
    grid-column: 1 / span 2;
}

.Screen  div:nth-child(4){
    grid-column: 3 / span 2;
}

.Screen  div:nth-child(5){
    grid-column: 5 / span 2;
}

.Navigation {
    background: var(--background-dark);
    text-align: center;
    margin-top: 20px;
    padding: 10px 0 5px;
    border-bottom: 1px solid lightgrey;
}

.Navigation img{
    height: 35px;
    padding: 0 1px;
}

.Navigation img:hover{
    cursor: pointer;
    opacity: .7;
}

@media only screen and (max-width: 600px){
    .Screen{
        grid-template-columns: 100%;
    }
    
    .Screen div:nth-child(1){
        grid-column: 1 / span 1;
    }
    
    .Screen  div:nth-child(2){
        grid-column: 1 / span 1;
    }
    
    .Screen  div:nth-child(3){
        grid-column: 1 / span 1;
    }
    
    .Screen  div:nth-child(4){
        grid-column: 1 / span 1;
    }
    
    .Screen  div:nth-child(5){
        grid-column: 1 / span 1;
    }
    
}

GitHub: https://github.com/Sokhavuth/tv

Heroku: https://khmerweb-tv.herokuapp.com/

Responsive: http://www.responsinator.com