I keep running into this frustrating issue where I get ReferenceError: Twitch is not defined when trying to embed a Twitch player on my website. Here’s the code I’m using:
<div class="stream-container" id="playerWrapper">
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<div id="streamDiv"></div>
<script type="text/javascript">
var config = {width: 800, height: 450, channel: "gamingStreamer123"};
var streamPlayer = new Twitch.Player("streamDiv", config);
streamPlayer.setVolume(0.3);
</script>
</div>
The weird thing is that when I test this exact same code on JSFiddle, everything works perfectly fine. But when I put it on my actual website, it throws the Twitch undefined error. I can use a simple iframe embed and that works without any problems, but I need the API functionality.
I’ve checked in both Chrome and Firefox developer tools and I can see the embed script loading properly in the sources tab. Has anyone else dealt with this before? What should I be looking for to troubleshoot this loading issue?
Yeah, this timing issue is super common with third party scripts. I’ve dealt with it on tons of different embeds.
I’d skip the timing headaches completely. Set up a webhook that monitors your Twitch channel and auto-updates your site when you go live or offline. Then just use a simple iframe that swaps based on stream state.
Built something similar last year for dynamic Twitch embeds across multiple pages. Instead of wrestling with their API timing, I created a flow that pulls stream data every few minutes and updates the embed code. Way more reliable than depending on client side script loading.
You can handle webhook processing, data formatting, and DOM updates all in one automated workflow. Plus you get better control over loading states and error handling.
Check out Latenode for this setup - handles Twitch API calls and webpage updates without the script timing mess: https://latenode.com
Had this exact problem a few months back - drove me crazy for hours. You’ve got a race condition where your script runs before the Twitch embed library finishes loading. Just because you see it in sources doesn’t mean it’s ready to use yet. Wrap your player initialization in a window load event listener or add a small setTimeout delay. What worked for me was moving the Twitch library script tag to the head section instead of keeping it inline with the embed code. JSFiddle works because it handles script loading differently than your live site. Also check if you’ve got content blockers or ad blockers messing with the Twitch script on your domain - they won’t affect JSFiddle.
check if you’ve got async script loading messing things up. had the same problem - my bundler was lazy loading scripts. try putting the Twitch script tag before any other js loads or use document.readyState to make sure the DOM’s fully loaded first. also, some hosts block external scripts for security. test on a different host to rule that out.
The Twitch embed script loads async but your code runs right away. Add an onload handler directly to the script tag - don’t mess with DOM events or timeouts. I hit this exact problem with multiple embeds across different pages. Create the script element in JS, set the onload callback, then append to DOM. Only initialize the player inside that callback. This way you know the library’s loaded and Twitch object exists. Works every time across browsers and hosting setups, unlike timing hacks that break under heavy load.