YouTube Play List Audio

by Jasz Andre

HTML

<!-- Agregar aquí el ID de la lista -->
<div data-video="PL2MJN9x8D1E74fQH39DPaKP2b6SBMpeBi"
  data-autoplay="0"
  data-loop="1"
  id="youtube-play">
</div>

<div id="youtube-prev"></div>
<div id="youtube-next"></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 la lista de YouTube.
// Script base: Amit Agarwal
// Adaptación: JaszAndre

function onYouTubeIframeAPIReady() {

  var box = document.getElementById('youtube-box');
  var ctrlq = ['ctrlqPlay', 'ctrlqPrev', 'ctrlqNext'],
      ctrlqID = ['youtube-play', 'youtube-prev', 'youtube-next'],
      icons = ['iconPlay', 'iconPrev', 'iconNext'],
      iconsID = ['play-video', 'previous-video', 'next-video'];

  for (var i = 0; i < ctrlq.length; i++) {
    ctrlq[i] = document.getElementById(ctrlqID[i]);
    icons[i] = document.createElement('img');
    icons[i].setAttribute('id', iconsID[i]);
    icons[i].style.cssText = 'float:left;cursor:pointer;width:55px;';
    ctrlq[i].appendChild(icons[i]);
  };

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

  var playButton = function(play) {
    var img = play ? 'GddldI3.png' : 'XrAWYmu.png';
    icons[0].setAttribute('src', 'https://i.imgur.com/' + img);
  };

  icons[1].setAttribute('src', 'http://i.imgur.com/UMzNnl6.png');
  icons[2].setAttribute('src', 'http://i.imgur.com/1Dd33Ls.png');

  ctrlq[0].onclick = function() {
    if (player.getPlayerState() === YT.PlayerState.PLAYING || player.getPlayerState() === YT.PlayerState.BUFFERING) { 
      player.pauseVideo();
      playButton(false);
    } else {
      player.playVideo();
      playButton(true);
    };
  };
  
  ctrlq[1].onclick = function() {
    if (player.getPlayerState() === YT.PlayerState.PLAYING || player.getPlayerState() === YT.PlayerState.BUFFERING) { 
      player.previousVideo();
      document.getElementById('youtube-title').innerText = player.getVideoData().title;
    };
  };
  
 ...