YouTube_musicplayer

Simple youtube music player

by neohekate

HTML

<div id="player">
</div>

<div id="mp3dock">
  <h4>
    Simple YouTube music player
  </h4>
  <center>
    <img src="https://64.media.tumblr.com/11af114011d1aa15ea855be3f4afec8f/tumblr_ogq65ukR4I1qj7kyho1_1280.png" />
  </center>
  <ul>
    <li>
      <button value="NlprozGcs80"> <!-- The video ID is at the end of the youtube link -->
        Pachelbel - Canon in D Major
      </button>
    </li>
    <li>
      <button value="g1kDd6yBQZ4">
        Minnie Riperton - Les Fleurs
      </button>
    </li>
    <li>
      <button value="UsFIZa1jQCE">
        Moby - The Sky is Broken
      </button>
    </li>
    <li>
      <button value="-zgHLvpfQU0">
        Billie Holiday - Strange Fruit
      </button>
    </li>
    <li>
      <button value="o5nh_lwNxWw">
        Jurassic 5 - Jayou
      </button>
    </li>
  </ul>
</div>

CSS

/* Functional Styling */
#player {
  position: relative;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  text-align: left;
  display: none;
}

#mp3dock {
  position: relative;
  z-index: 1;
}

/* Decorative Styling */
#mp3dock {
  display: inline-block;
  padding: 10px;
  border: 2px outset;
  background-color: #c3c3c3;
}

ul,
li,
button,
h4 {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

button {
  font-size: 100%;
  font-family: inherit;
  border: 0;
  background: transparent;
}

#mp3dock img {
  margin: 10px;
  width: 148px;
  border: 1px solid #000;
}

JavaScript

$('#mp3dock button').on('click', function() {
	if ($(this).parents('marquee').length != 0) {
      $('#mp3dock marquee > button').unwrap();
      $('#player').empty();
  } else {
    	$('#mp3dock marquee > button').unwrap();
      $('#player').empty();
     	$(this).wrap("<marquee></marquee>");
      $('<iframe width="560" height="315" src="https://www.youtube.com/embed/' + $(this).val() + '?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>').appendTo('#player');
 }
});