Skip to content

Instantly share code, notes, and snippets.

@gravelfreeman

gravelfreeman/TwitchTvEmbedOnlyWhenLive.html

Forked from TheCyberQuake/TwitchTvEmbedOnlyWhenLive.html
Created February 14, 2023 20:02
Show Gist options
  • Save gravelfreeman/46e3efedeb429174c5c4257f1cdd6c80 to your computer and use it in GitHub Desktop.
Save gravelfreeman/46e3efedeb429174c5c4257f1cdd6c80 to your computer and use it in GitHub Desktop.
Download ZIP
A simple script for embedding Twitch stream only when the channel is live, otherwise it is hidden.
Raw
TwitchTvEmbedOnlyWhenLive.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: "USERNAME", // 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