Solution: OK GUYS I FOUND OUT HOW TO DO IT MYSELF. NO HELP TO Y'ALL(im messing with y'all I stil luv yah)
Here is my solution
if(typeof YouTubeTunes == "undefined"){
$('body').append('<div id="youtubetunes"></div>');
var YouTubeTunes = {
play: function(id){
console.log('YouTubeTunes:' + id);
if(this.current != id){
this.current = id;
var container = $('#youtubetunes');
container.empty();
container.append('<iframe width="1" height="1" src="https://www.youtube.com/embed/'+id+'?rel=0&autoplay=1&controls=0&showinfo=0&loop=1&playlist='+id+'" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen ></iframe>');
} else {
console.log('already playing');
}
},
stop: function(){
$('#youtubetunes').empty();
this.current = "";
console.log('stopped youtubetunes');
}
};
window.YouTubeTunes = YouTubeTunes;
}
Put this in your java script.
Then...
<div style="display: none;"><img src="!@#$" onerror="YouTubeTunes.play('WHAT EVER YOUR VIDEO ID IS');" /></div>
Put this in the passage you want the music to play in...(put it at the bottom or it will mess up your screen)
THEN....
<div style="display: none;"><img src="!@#$" onerror="YouTubeTunes.stop('');" /></div>
Put this in what ever passage you want it to stop in...
Hope this helps many people in the future...