YouTube Audio

HTML

<!-- Agregar aquí el ID del video -->
<div data-video="Ui1eRqX0mZo"  
  data-autoplay="0"         
  data-loop="1"             
  id="youtube-audio">
</div>

<div id="youtube-title"></div>
<div id="youtube-box"></div>

CSS

#youtube-title {
  background-color: #444;
  color: #FFF;
  font-family: 'Arial', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
  padding: 4px 15px;
  border-radius: 3px;
  margin-top: 15px; /* Controla la altura del título */
  margin-left: 5px;
  /*display: none;*/ /* Descomentar para ocultar el título */
}

JavaScript

// 1. Carga asíncrona de la API IFrame de YouTube.
var tag = document.createElement('script');

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

// 2. Función que crea un <iframe> conteniendo el reproductor de YouTube.
// Autor: Amit Agarwal | Web: http://www.labnol.org/?p=26740
// Adaptación: JaszAndre

function onYouTubeIframeAPIReady() {

  var box = document.getElementById("youtube-box");
  var ctrlq = document.getElementById("youtube-audio");

  var icon = document.createElement("img");
  icon.setAttribute("id", "youtube-icon");
  icon.style.cssText = "float:left;cursor:pointer;width:55px;";
  ctrlq.appendChild(icon);

  var div = document.createElement("div");
  div.setAttribute("id", "youtube-player");
  box.appendChild(div);

  var toggleButton = function(play) {
    var img = play ? "GddldI3.png" : "XrAWYmu.png";
    icon.setAttribute("src", "https://i.imgur.com/" + img);
  };

  ctrlq.onclick = function() {
    if (player.getPlayerState() === YT.PlayerState.PLAYING || player.getPlayerState() === YT.PlayerState.BUFFERING) { 
      player.pauseVideo();
      toggleButton(false);
    } else {
      player.playVideo();
      toggleButton(true);
    };
  };

  var player = new YT.Player("youtube-player", {
    height: "0",
    width: "0",
    videoId: ctrlq.dataset.video,
    playerVars: {
      autoplay: ctrlq.dataset.autoplay,
      loop: ctrlq.dataset.loop,
    },
    events: {
      'onReady': function(e) {
        player.setPlaybackQuality("small");
        toggleButton(player.getPlayerState() !== YT.PlayerState.CUED);
        document.getElementById("youtube-title").innerText = player.getVideoData().title;
      },
      'onStateChange': function(e) {
        if (e.data === YT.PlayerState.ENDED) {
          toggleButton(false);
        };
      }
    }
  });
};