Playlist - Backstory

<style>
.background {background-color:#FFFF99;width:100%;height:500px;border:1px solid #666;}
.scrolly {float:right;border-left:1px solid #666;height:500px;width:50%;overflow:auto;}
.cover {width:49.85%;height:500px;float:left;background:url(https://i.pinimg.com/236x/f0/02/f2/f002f216473639d90a52518bde693caa.jpg);background-size:cover;}
.title {color:#fff;letter-spacing:15px;text-transform:uppercase;text-shadow:2px 2px #666;font-size:30px;margin-top:50%}
.collapsible {
  background-color:#FFFF99;
  color: #666;;
  cursor: pointer;
  padding: 18px;
  width: 100%;border:none;
height:100px;
  border-bottom: 1px solid #666;
  text-align: left;
  font-size: 20px;letter-spacing:3px;
}
.artist {font-size:10px;}
.length {font-size:10px;float:right;}

.active, .collapsible:hover {
  background-color: #FFEF9A;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #FFFFCC;border-bottom:1px solid #666;
}
</style>

<div class="background">
<div class="cover">
<center>
<div class="title">Playlist</div>
</center>
</div>
<div class="scrolly">

<!--start song-->
	<button type="button" class="collapsible">Where Are Our Angels Now<br><br>
    <a class="artist">Florian Bur</a>
    <a class="length">8:29</a></button>
<div class="content"><br>
<center>
<iframe width="75%;"src="https://www.youtube.com/embed/Muz6o6FgMuM?list=PLTyJBpzViYVwXa7OF8IbzJyfYar2Fcek4" title="The Sound Of Angels: WHERE ARE OUR ANGELS NOW | by Florian Bur" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Put your backstory information here. You can write a whole chapter, or even just a few little blurbs. Personally, I like having chapters, and then changing up the music to match. If there's an intese fight scene, have some action-packed music! Or if they're settling into their new home, maybe find some nice ambiance. Either way, the possibilities are endless!</p>
<p>Lorem ipsum dolor sit amet, nihil dicam laboramus sed an, affert concludaturque his ea. Gubergren dissentiet sea ea, cu sint quaeque has, ut cetero persequeris vim. Ut impedit detracto quo. Sit causae corpora ex. Eu labore admodum qualisque duo, vero inciderint et ius. Te vis ludus sensibus, qui prima epicuri tincidunt ut, eu sed ullum incorrupte. Putent epicurei cu per.</p>

</center>
</div>
<!--end song-->

<!--start song-->
	<button type="button" class="collapsible">Revival<br><br>
    <a class="artist">Fearless Motivation</a>
    <a class="length">7:13</a></button>
<div class="content"><br>
<center>
<iframe width="75%" src="https://www.youtube.com/embed/F8m3CFJBJck?list=PLTyJBpzViYVwXa7OF8IbzJyfYar2Fcek4" title="Fearless Motivation - Revival | (Heroic Motivational Orchestra)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, nihil dicam laboramus sed an, affert concludaturque his ea. Gubergren dissentiet sea ea, cu sint quaeque has, ut cetero persequeris vim. Ut impedit detracto quo. Sit causae corpora ex. Eu labore admodum qualisque duo, vero inciderint et ius. Te vis ludus sensibus, qui prima epicuri tincidunt ut, eu sed ullum incorrupte. Putent epicurei cu per.</p>

</center>
</div>
<!--end song-->

<!--start song-->
	<button type="button" class="collapsible">I Wonder As I Wander<br><br>
    <a class="artist">Lindsey Stirling</a>
    <a class="length">4:25</a></button>
<div class="content"><br>
<center>
<iframe width="75%" src="https://www.youtube.com/embed/4rR8jc6EPQM?list=PLTyJBpzViYVwXa7OF8IbzJyfYar2Fcek4" title="Lindsey Stirling - I Wonder As I Wander (Official Video)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, nihil dicam laboramus sed an, affert concludaturque his ea. Gubergren dissentiet sea ea, cu sint quaeque has, ut cetero persequeris vim. Ut impedit detracto quo. Sit causae corpora ex. Eu labore admodum qualisque duo, vero inciderint et ius. Te vis ludus sensibus, qui prima epicuri tincidunt ut, eu sed ullum incorrupte. Putent epicurei cu per.</p>

</center>
</div>
<!--end song-->


<!--start song-->
	<button type="button" class="collapsible">Roaring 20s<br><br>
    <a class="artist">Panic! At the Disco</a>
    <a class="length">3:06</a></button>
<div class="content"><br>
<center>
<iframe width="75%" src="https://www.youtube.com/embed/HWSqv-xsc5o?list=PLTyJBpzViYVwXa7OF8IbzJyfYar2Fcek4" title="Panic! At The Disco - Roaring 20s (Official Audio)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, nihil dicam laboramus sed an, affert concludaturque his ea. Gubergren dissentiet sea ea, cu sint quaeque has, ut cetero persequeris vim. Ut impedit detracto quo. Sit causae corpora ex. Eu labore admodum qualisque duo, vero inciderint et ius. Te vis ludus sensibus, qui prima epicuri tincidunt ut, eu sed ullum incorrupte. Putent epicurei cu per.</p>

</center>
</div>
<!--end song-->

<!--start song-->
	<button type="button" class="collapsible">Star Sky<br><br>
    <a class="artist">Two Steps From Hell</a>
    <a class="length">5:34</a></button>
<div class="content"><br>
<center>
<iframe width="75%" src="https://www.youtube.com/embed/pICAha0nsb0?list=PLTyJBpzViYVwXa7OF8IbzJyfYar2Fcek4" title="Two Steps From Hell - Star Sky" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, nihil dicam laboramus sed an, affert concludaturque his ea. Gubergren dissentiet sea ea, cu sint quaeque has, ut cetero persequeris vim. Ut impedit detracto quo. Sit causae corpora ex. Eu labore admodum qualisque duo, vero inciderint et ius. Te vis ludus sensibus, qui prima epicuri tincidunt ut, eu sed ullum incorrupte. Putent epicurei cu per.</p>

</center>
</div>
<!--end song-->

<!--start song-->
	<button type="button" class="collapsible">Remember the Way of Life<br><br>
    <a class="artist">Ghostwriter Music</a>
    <a class="length">9:58</a></button>
<div class="content"><br>
<center>
<iframe width="727" height="409" src="https://www.youtube.com/embed/bTeFCQFidkY?list=PLTyJBpzViYVwXa7OF8IbzJyfYar2Fcek4" title="'REMEMBER THE WAY OF LIFE' by Ghostwriter Music ~ World's Most Epic Music" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, nihil dicam laboramus sed an, affert concludaturque his ea. Gubergren dissentiet sea ea, cu sint quaeque has, ut cetero persequeris vim. Ut impedit detracto quo. Sit causae corpora ex. Eu labore admodum qualisque duo, vero inciderint et ius. Te vis ludus sensibus, qui prima epicuri tincidunt ut, eu sed ullum incorrupte. Putent epicurei cu per.</p>

</center>
</div>
<!--end song-->

</div>
</div>
<br>
<center><a href="https://aurumcodes.tumblr.com/" style="font-size: 10px; color: #666;">code by Aurum</a>
</center>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>