Mick Gordon
Appearance
<button id="radioStart">▶ Radio</button>
Not playing
<button id="radioReplay" disabled>↻ Replay</button>
<button id="radioNext" disabled>⏭ Next</button>
<style>
.radioBar{
display:flex; align-items:center; gap:10px;
padding:10px 12px; border:1px solid rgba(255,120,0,.35);
border-radius:10px; background:rgba(0,0,0,.45);
color:#fff; max-width:720px;
}
#radioTitle{
flex:1;
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
opacity:.95;
}
.ytHidden{
width:1px; height:1px; overflow:hidden;
position:absolute; left:-9999px; top:-9999px;
}
</style>
<script>
const PLAYLIST_ID = "PLbskP5RAOv8iZNrpqyc12gQzhnOfmbpdO";
// Load YouTube Iframe API
(function(){
const s = document.createElement("script");
s.src = "https://www.youtube.com/iframe_api";
document.head.appendChild(s);
})();
let player;
function setTitle(text){ document.getElementById("radioTitle").textContent = text; }
function enableControls(on){
document.getElementById("radioReplay").disabled = !on;
document.getElementById("radioNext").disabled = !on;
}
window.onYouTubeIframeAPIReady = function () {
player = new YT.Player("ytPlayer", {
height: "1",
width: "1",
playerVars: {
// no visible UI
controls: 0,
modestbranding: 1,
rel: 0,
// playlist
listType: "playlist",
list: PLAYLIST_ID,
// don't autoplay until user clicks Start
autoplay: 0
},
events: {
onReady: () => setTitle("Ready"),
onStateChange: (e) => {
// When playing or buffering, update title
if (e.data === YT.PlayerState.PLAYING || e.data === YT.PlayerState.BUFFERING) {
const data = player.getVideoData ? player.getVideoData() : null;
if (data && data.title) setTitle(data.title);
enableControls(true);
}
}
}
});
};
document.getElementById("radioStart").addEventListener("click", () => {
if (!player) return;
// This user click is what makes playback/auto-play more likely to work
player.playVideo();
// Update title shortly after starting (sometimes metadata lags)
setTimeout(() => {
const data = player.getVideoData ? player.getVideoData() : null;
if (data && data.title) setTitle(data.title);
enableControls(true);
}, 600);
});
document.getElementById("radioNext").addEventListener("click", () => {
if (!player) return;
player.nextVideo();
setTimeout(() => {
const data = player.getVideoData ? player.getVideoData() : null;
if (data && data.title) setTitle(data.title);
}, 400);
});
document.getElementById("radioReplay").addEventListener("click", () => {
if (!player) return;
player.seekTo(0, true);
player.playVideo();
});
</script>