 text-[#EAEAEA] border border-[#8B6F6F] 
      rounded-lg shadow-md transition duration-300 hover:bg-[#3E3232] hover:text-white">Load Playlist</button>
    </div>
  </div>

  <!-- Container where the flipbook will be displayed -->
  <div id="flipbookContainer" class="h-screen w-full"></div>

  <!-- Container for the YouTube player -->
  <div id="mediaContainer" class="hidden">
    <button id="closeMediaContainer" class="absolute top-2 right-2 text-white bg-red-500 rounded-full p-1">X</button>
    <iframe id