Skip to content

Instantly share code, notes, and snippets.

@seanmcnally98

seanmcnally98/TwitchTvEmbedOnlyWhenLive.html

Forked from TheCyberQuake/TwitchTvEmbedOnlyWhenLive.html
Last active May 9, 2024 13:07
Show Gist options
  • Save seanmcnally98/093880d7b0f0d476ab150183db991ed3 to your computer and use it in GitHub Desktop.
Save seanmcnally98/093880d7b0f0d476ab150183db991ed3 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive script for embedding Twitch stream only when the channel is live, otherwise it is hidden. See lines 57 and 67 for values you need to change (see the comments written at end of those lines). Original hide/show code forked from momeenme, then TheCyberQuake. Responsive code copied from from https://philna.sh/blog/2020/03/23/responsive-tw…
Raw
TwitchTvEmbedOnlyWhenLive.html
<html>
<head>
<style>
.hide { display:none; }
#twitch-video {
padding-top: 56.25%;
position: relative;
height: 0;
}
#twitch-video iframe{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.twitch-container .twitch-chat {
height: 400px;
}
.twitch-container .twitch-chat iframe {
width: 100%;
height: 100%;
}
@media screen and (min-width: 850px) {
.twitch-container {
position: relative;
}
#twitch-video {
width: 75%;
padding-top: 42.1875%;
}
.twitch-container .twitch-chat {
width: 25%;
height: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
}
</style>
</head>
<body>
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div class="twitch-container">
<div id="twitch-video" class="hide">
</div>
<div class="twitch-chat">
<iframe
frameborder="0"
scrolling="no"
src="https://www.twitch.tv/embed/USERNAME/chat?parent=YOURWEBSITE.com&parent=www.YOURWEBSITE.com" <!-- Change the CHANNELNAME to the desired twitch handle. Change the parent website in the URL here to the actual place you're running the script from, otherwise twitch will throw an error. Must do versions with and without www. Only put the root URL of your website, no need to put in the specific page.-->
height="100%"
width="100%"
allow="autoplay">
</iframe>
</div>
</div>
<script type="text/javascript">
var options = {
channel: "USERNAME", // TODO: Change this to the streams username you want to embed
height: 360,
width: 640,
};
var player = new Twitch.Player("twitch-video", 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-video").classList.remove('hide');
document.getElementById("twitch-container").classList.remove('hide');
player.removeEventListener(Twitch.Player.ONLINE, handleOnline);
player.addEventListener(Twitch.Player.OFFLINE, handleOffline);
player.setMuted(false);
}
function handleOffline() {
document.getElementById("twitch-video").classList.add('hide');
document.getElementById("twitch-container").classList.add('hide');
player.removeEventListener(Twitch.Player.OFFLINE, handleOffline);
player.addEventListener(Twitch.Player.ONLINE, handleOnline);
player.setMuted(true);
}
</script>
</body>
@HayWire-UK
Copy link

I am asking the same. Can this be updated to show multiple live streams using a list of usernames.

@MosesFrnchToast
Copy link

MosesFrnchToast commented May 9, 2024 •
edited
Loading

I just set this up but only the stream embed works. The chat portion seems to not connect. Tried with multiple creators who were currently live.
Did I do something wrong here?

<script src= "https://player.twitch.tv/js/embed/v1.js"></script> 
<div class="twitch-container">
	<div id="twitch-video" class="hide">
	</div>
    <div class="twitch-chat">
	<iframe
  	frameborder="0"
  	scrolling="no"
  	src="https://www.twitch.tv/embed/mosesfrnchtoast/chat?parent=twitch.tv/&parent=www.twitch.tv/" 
  	height="100%"
  	width="100%"
    allow="autoplay">
	</iframe>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment