HTML:
<div data-video="_nj-LnZqY-0" data-autoplay="0" data-loop="1" id="youtube-audio"></div>
JS:
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
var ctrlq = document.getElementById("youtube-audio");
ctrlq.innerHTML = '<img id="youtube-icon2" src=""/><div id="youtube-player"></div>';
ctrlq.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
ctrlq.onclick = toggleAudio;
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': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function togglePlayButton(play) {
document.getElementById("youtube-icon2").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
}
function toggleAudio() {
if (player.getPlayerState() == 1 || player.getPlayerState() == 3) {
player.pauseVideo();
togglePlayButton(false);
} else {
player.playVideo();
togglePlayButton(true);
}
}
function onPlayerReady(event) {
player.setPlaybackQuality("small");
document.getElementById("youtube-audio").style.display = "block";
togglePlayButton(player.getPlayerState() !== 5);
}
function onPlayerStateChange(event) {
if (event.data === 0) {
togglePlayButton(false);
}
}
</script>