Music Corner

by enbette

HTML

<div id="wrapper">
  <div class='imgDiv'>
  <img src="https://i.ibb.co/qLMpLgWH/Music4.png">
  </div>
  <div class="horizontalWrapper">
    
    <div class="creditsWrapper">
      <span id='creditLine'></span>
      <div id='aviDiv'><img id="avi" src="" /></div>
      <span id="credit"></span>
    </div>
    <div id="player"></div>
  </div>
  <div class='imgDiv'>
  <img src="https://i.ibb.co/qLMpLgWH/Music4.png" 
  style='margin-left: 405px'></div>
</div>

CSS

#wrapper{
  width:688px;
  height:500px;


  --s: 152px; /* control the size*/
  --c1: #4b3f72;
  --c2: #1f2041;
    
  --_l:#0000 43.75%,var(--c1) 0 56.25%,#0000 0;
  background:
    conic-gradient(#0000 75%,var(--c1) 0) 
     calc(var(--s)/-8) calc(var(--s)/-8)/calc(var(--s)/2) calc(var(--s)/2),
    repeating-conic-gradient(var(--c2) 0 25%,#0000 0 50%) 
     calc(var(--s)/-4) calc(var(--s)/-4)/var(--s) var(--s),
    linear-gradient(-45deg,var(--_l))0 0/var(--s) var(--s),
    linear-gradient( 45deg,var(--_l))0 0/var(--s) var(--s) var(--c2);

}


#creditLine{
  display:block;
  border-radius: 15px 0 0 0;
  background-color: #ff57cd;
}


.creditsWrapper{
  text-align: center;
  width:248px;
  height:350px;
  font-family: "Google Sans Code", monospace;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 20px;
  font-weight: 700;
  color:white;

 

}
.horizontalWrapper{
  display:flex;
  flex-direction: row;
  margin-top: 0;
}

#credit {
  display:block;
  text-align: center;
  background-color: #a219fe;
  margin-top:0px;
  border-radius: 0 0 0 15px;
}
#avi {
  margin: auto;
  
}
img{
  margin-top:8px;
}

#aviDiv {
  text-align: center;
  height: 0px;
  background-color: #fea21914;
  transition: height 0.5s ease-in-out;
  overflow: hidden;
  margin-top:0px;
}
#player {
  border-radius: 0 15px 15px 0;
  margin-top:0px;
}

.imgDiv{
  height: 75px;


  --s: 86px; /* control the size*/
  --c1: #422154;
  --c2: #1f2041;
    
  --_l:#0000 43.75%,var(--c1) 0 56.25%,#0000 0;
  background:
    conic-gradient(#0000 75%,var(--c1) 0) 
     calc(var(--s)/-8) calc(var(--s)/-8)/calc(var(--s)/2) calc(var(--s)/2),
    repeating-conic-gradient(var(--c2) 0 25%,#0000 0 50%) 
     calc(var(--s)/-4) calc(var(--s)/-4)/var(--s) var(--s),
    linear-gradient(-45deg,var(--_l))0 0/var(--s) var(--s),
    linear-gradient( 45deg,var(--_l))0 0/var(--s) var(--s) var(--c2);
}

JavaScript

let credit = document.getElementById('credit')
let avi = document.getElementById('avi')
let credits = [
  // Keep avi as '' if there's no avi 
  // You don't have to have these in exact order of the playlist, code checks the song by name
  {song:"Joe Hisaishi - Merry-Go-Round of Life (from Howl’s Moving Castle)",name:'Elisia',avi:'https://i.ibb.co/TxxQVx8B/image.png'},
  {song:'Monster High FULL Opening Song',name:'Elisia',avi:'https://i.ibb.co/TxxQVx8B/image.png'},
  {song:'Andrew Gold - Spooky, Scary Skeletons (Undead Tombstone Remix)',name:'Kofod',avi:''},
  {song:'Britney Spears - Circus (Official HD Video)',name:'SadBread',avi:'https://i.ibb.co/9Rb4yyM/image.png'},
  {song:"Taco - Puttin' On The Ritz (Official Video)",name:'SadBread',avi:'https://i.ibb.co/9Rb4yyM/image.png'},
  {song:'3OH!3 - Dirty Mind [FROM THE VAULTS]',name:'SadBread',avi:'https://i.ibb.co/9Rb4yyM/image.png'},
  {song:'"Steal The Show" Official Music Video | Boo York, Boo York | Monster High',name:'SadBread',avi:'https://i.ibb.co/9Rb4yyM/image.png'},
  {song:'No Children',name:'enbette',avi:'https://i.ibb.co/wN06qJDw/image.png'},
  {song:"Mort Shuman - Comme avant (Face 1)(1978)",name:'enbette',avi:'https://i.ibb.co/wN06qJDw/image.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);

// This function creates an <iframe> (and YouTube player)
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '350',
    width: '440',
    playerVars: 
    {
      listType:'playlist',
      list:'PLg4tIILdFKL67WeKO6qZUKkz2vyG_xrqk'
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

// The API will call this function when the video player is ready.
function onPlayerReady(event) {
 ...