Disable autoplay and enable mute for Twitch clips in web application

Other Questions Twitch
1

I’m building a web app that shows popular gaming clips from Twitch using their developer API. The app works fine and pulls the clips correctly, but I have one annoying problem.

When the page loads, all the clips start playing at once with sound enabled. This creates a terrible audio mix that’s really loud and jarring. I need to figure out how to make the clips load without automatically playing and with sound muted by default.

I’ve tried looking through the API documentation but can’t find the right way to control these playback settings. The clips get embedded through the API response, but I’m not sure where to add the mute and autoplay controls.

Here’s my current setup:

<div id="video-container"></div>

var videoContainer = document.getElementById('video-container'),
    apiResponse = JSON.parse(request.responseText);

apiResponse.clips.forEach(function(videoClip, i, arr) {
    videoElement = document.createElement('div');
    videoElement.innerHTML = videoClip.embed_html;
    videoContainer.appendChild(videoElement);
});

How can I modify this to prevent autoplay and mute the audio?

2

You’re injecting the Twitch embed HTML directly without changing it. Parse and modify the iframe attributes first before adding them to your DOM. After creating the videoElement, grab the iframe with videoElement.querySelector(‘iframe’), get its src attribute, then append ‘&autoplay=false&muted=true’ to the URL before setting it back. I hit this exact problem last year building a similar app and this approach killed the audio chaos completely. Just intercept the embed code before it goes live on your page.