Multiple duplicates appearing when adding Twitch stream to Tumblr page

Other Questions Twitch
1

I’m working on adding a live stream feature to a website that uses Tumblr as the platform. The goal is to embed a Twitch stream with a custom overlay that shows a static image when the stream is offline.

The Problem

When I test my code locally, everything works perfectly. But after uploading to Tumblr, the same code gets repeated 9 times on the page. I’m not sure if this is a Tumblr-specific issue or something wrong with my implementation.

My Setup

The structure uses HTML5 semantic elements with a custom overlay system. Here’s what I’m working with:

HTML Structure:

<section class="stream-wrapper main-container">
  <div class="stream-title">
  </div>
  <div class="video-area">
    <div id="stream-overlay" style="position: absolute; height:1rem; width:100%">
      <img class="video-element" src="assets/noise.gif" style="height:500px">
    </div>
    <iframe
      id="main-stream"
      class="video-element"
      src="https://player.twitch.tv/?channel=username"
      height="300"
      width="100%"
      frameborder="0"
      scrolling="no"
      allowfullscreen="true"
      position="absolute">
    </iframe>
  </div>
</section>

JavaScript Logic:

<script type="text/javascript">
document.getElementById("stream-overlay").addEventListener("Twitch.Player.ONLINE", function(){
  var overlay = document.getElementById("stream-overlay");
  overlay.style.display="none";
});
document.getElementById("stream-overlay").addEventListener("Twitch.Player.OFFLINE", function(){
  var overlay = document.getElementById("stream-overlay");
  overlay.style.display="block";
});
</script>

Styling:

.video-component {
  object-position: center;
  padding-left: 28.5%;
  padding-right: 28.5%;
}

.video-element {
  object-position: center;
}

.main-container:hover #stream-overlay {
  display: none;
}

Has anyone encountered similar duplication issues with Tumblr? Any suggestions on what might be causing this behavior?

2

yep, tumblr can be tricky like that! try moving your js script to the custom html area of your theme instead. sometimes they duplicate stuff, especially with iframes. also, check for any other scripts that might be causing this issue.

3

Tumblr duplicates your stream embed because it runs the same code through different theme loops. Had this exact nightmare on our company blog.

Ditch the Tumblr iframe mess completely. Use external automation to monitor your Twitch channel and control what displays.

I built this with Latenode. It pings Twitch API to check if you’re live, then updates HTML on your page via webhook. No duplicate iframes, no broken JavaScript.

Switches between offline image and live stream automatically. You can add chat or viewer stats later. 10 minutes to set up, works anywhere - not just Tumblr.

Way cleaner than fighting Tumblr’s broken theme engine.

4

Had this exact issue embedding Twitch on my gaming blog. Tumblr processes your code multiple times during rendering, especially with JavaScript event listeners on DOM elements. Wrap your script in a conditional check - test if your overlay element already has listeners before adding new ones. Don’t put this code in post content either - stick it directly in the theme’s HTML. Also check for any Tumblr tags or variables in your code that might be getting processed over and over. Tumblr’s content parsing system makes iframe embedding pretty messy.

5

tumblr’s theme parser is notorious for breaking stuff like this. wrap your whole section in a unique id and check if it exists before running any code. those twitch player events are garbage on tumblr anyway - stick with your css hover instead of trying to make js events work.

6

This duplication mess happens because Tumblr runs your code through their theme engine multiple times. I’ve hit this exact issue building custom widgets for our company blog.

Don’t bother wrestling with Tumblr’s quirks. Build an automation that handles your Twitch stream status outside of Tumblr completely.

I made something similar with Latenode - it checks the Twitch API every few minutes, then updates a simple div via webhook. No iframe headaches, no duplicate code. The automation detects online/offline status and switches your overlay automatically.

You get clean implementation that works everywhere, not just Tumblr. Plus you can add stream notifications or viewer counts later.

Way better than fighting Tumblr’s theme engine.

7

This happens because Tumblr runs inline scripts every time it regenerates the page. Had the same issue when I embedded game streams on my portfolio. Your JavaScript keeps firing as Tumblr rebuilds the DOM. Move that event listener code to your theme’s footer instead of keeping it inline. Add a flag to stop multiple initializations - throw if (window.streamInitialized) return; at the top of your script, then set window.streamInitialized = true; after setup. Also, those Twitch player events probably won’t fire right in Tumblr anyway. Just use the Twitch API directly to check stream status instead of relying on player events. Way more reliable and sidesteps Tumblr’s rendering issues.