Music Corner

by enbette

HTML

<div id="wrapper">
  <img src="https://i.ibb.co/Ndz7YfyY/music31.png" />
  <div class="horizontalWrapper">
    <div id="player"></div>
    <div id="status" hidden>Playlist is Loading...</div>
    <div class="creditsWrapper">
      <span id='creditLine'></span>
      <img id="avi" src="" hidden />
      <span id="credit"></span>
    </div>
  </div>
</div>

CSS

#wrapper{
  width:688px;
  height:500px;
  background: #ff6842;
background: linear-gradient(142deg, rgba(255, 104, 66, 1) 0%, rgba(255, 97, 184, 1) 100%);
}
.creditsWrapper{
  width:248px;
  padding-top:20px;
  font: italic bold 20px cursive;
  color:white;
}
.horizontalWrapper{
  display:flex;
  flex-direction: row;
}

.horizontalWrapper div{
  
}

JavaScript

let credit = document.getElementById('credit')
let avi = document.getElementById('avi')
let credits = [
  
  {song:'Your Woman',name:'Enbette',avi:'https://i.ibb.co/HTr4c0WG/Enbette.png'},
  {song:'System Of A Down - Cigaro (Official Audio)',name:'Suchomimus',avi:''},
  {song:'My Way',name:'Kitten',avi:''},
  {song:'Mac Miller - Love Lost',name:'Azriel',avi:''},
  {song:'The Ballad of Jane Doe [Official Audio] from Ride the Cyclone The Musical featuring Emily Rohm',name:'SadBread',avi:''},
  {song:'3OH!3 - Dirty Mind [FROM THE VAULTS]',name:'SadBread',avi:''},
  {song:'Yuki Kimura - Love & Joy',name:'Maxwell',avi:''},
  {song:'101 North',name:'Concertsrule',avi:''},
  {song:"Don't Follow",name:'Concertsrule',avi:''},
  {song:'Whale & Wasp',name:'Concertsrule',avi:''},
  {song:'Rotten Apple',name:'Concertsrule',avi:''},
  {song:'Shade of Flowers',name:'Athena',avi:''},
  {song:'HAPPY ME! (행복해버리기 (HAPPY ME!))',name:'Bexxi',avi:''},
  {song:'Love You Like That (Love You Like That)',name:'Bexxi',avi:''},
  {song:'bbno$ - 1-800 (ft. ironmouse)',name:'Elisia',avi:'https://i.ibb.co/bMVBj82y/Elisia.png'},
  {song:'Crybaby',name:'Olympus',avi:'https://i.ibb.co/vxS6NykZ/Olympus.png'},
  {song:'Storm',name:'SadBread',avi:'https://i.ibb.co/Kc4BBTC2/Sadbread.png'},
  {song:'A Great Big World - You',name:'Kofod',avi:'https://i.ibb.co/0p9vvC2T/Kofod.png'}
]
var tag = document.createElement('script');

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

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '350',
    width: '440',
    playerVars: 
    {
      listType:'playlist',
      list: 'PLg4tIILdFKL7t8r4XdbK_eunjkpagytRH'
    },
    events: {
      'onReady':...