Skip to content

Instantly share code, notes, and snippets.

@PSingletary

PSingletary/Live_Channel.html

Created April 7, 2024 15:25
Show Gist options
  • Save PSingletary/75a6d36a1d26e812fd47f3e060ceb652 to your computer and use it in GitHub Desktop.
Save PSingletary/75a6d36a1d26e812fd47f3e060ceb652 to your computer and use it in GitHub Desktop.
Download ZIP
Show Twitch Channel Embed when live, hide when offline
Raw
Live_Channel.html
<html>
<head>
<style>
.hide { display:none; }
/* Optional: The following css just makes sure the twitch video stays responsive */
#twitch {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
#twitch object, #twitch iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="twitch" class="hide">
</div>
<script type="text/javascript">
var options = {
channel: "p5ingletary", // TODO: Change this to the streams username you want to embed
width: 640,
height: 360,
};
var player = new Twitch.Player("twitch", options);
player.addEventListener(Twitch.Player.READY, initiate)
function initiate() {
player.addEventListener(Twitch.Player.ONLINE, handleOnline);
player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
player.removeEventListener(Twitch.Player.READY, initiate);
}
function handleOnline() {
document.getElementById("twitch").classList.remove('hide');
player.removeEventListener(Twitch.Player.ONLINE, handleOnline);
player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
player.setMuted(false);
}
function handleOffline() {
document.getElementById("twitch").classList.add('hide');
player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
player.addEventListener(Twitch.Player.ONLINE, handleOnline);
player.setMuted(true);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment