How to adjust dimensions of embedded Twitch player

Other Questions Twitch
1

I’m working on a webpage that includes an embedded Twitch stream player, but I’m having trouble controlling its size properly. My page layout has an image taking up about 35% of the width on the left side, and I want the Twitch embed to fill the remaining 65% of the space on the right.

Here’s my current HTML setup:

<div class="stream-container">
    <div id="stream-player"></div>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script type="text/javascript" class="stream-js">
        new Twitch.Embed("stream-player", {
            width: "100%",
            height: "100%",
            theme: "light",
            channel: "ExampleStreamer",
            parent: ["mysite.com"]
        });
    </script>
</div>

And my CSS:

.stream-container {
    position: absolute;
    float: left;
    left: 1vw;
    top: 2vh;
}

.stream-js {
    position: absolute;
    top: 50vh;
    max-width: 65%;
    max-height: 85vh;
}

I tried applying CSS styles to the script element itself, but that doesn’t seem to work. The embed isn’t responding to my size constraints the way I expected. What’s the proper way to control the dimensions of a Twitch embed so it fits exactly in the space I want?

2

Twitch embed needs pixel values, not percentages. When you pass “100%” to Twitch.Embed options, it gets confused since there’s no container size to reference - it doesn’t work like regular CSS.

Hit this exact problem last year building a gaming site. Here’s what fixed it: calculate actual pixel dimensions first, then pass those to the embed constructor.

Try this: let embedWidth = window.innerWidth * 0.65; let embedHeight = embedWidth * 0.5625; then use those variables in your Twitch.Embed call. The 0.5625 keeps the 16:9 aspect ratio most streams use.

Ditch the positioning from your script tag too - it’s not helping. Focus your CSS on the stream-container and let the embed handle its own sizing once you give it proper pixel values.

3

The problem is you’re mixing percentages with absolute positioning. Twitch embeds need concrete pixel dimensions to work right.

Don’t fight CSS - just automate the whole thing. Set up automation that calculates the right pixel dimensions based on viewport size and updates the embed automatically.

I do this exact thing by monitoring window resize events and auto-adjusting embed dimensions. Works way better than wrestling with CSS.

The automation grabs 65% of viewport width, keeps 16:9 aspect ratio, and reinitializes the embed with new pixel values when needed. No more CSS guesswork or iframe headaches.

You can also extend it for different breakpoints, streamer switching, or layout changes based on content. Much more flexible than static CSS.

Check out Latenode for this kind of responsive automation: https://latenode.com

4

yup, def don’t style the script tag. the embed makes an iframe, so use pixel values in the js options for the width/height instead of %s. maybe try width: 800, height: 450 or smth that fits the 65% area nicely.

5

You’re styling the script element instead of the container that holds the iframe. When the Twitch embed loads, it creates its own iframe and ignores any styling on the script tag. Style the #stream-player div instead - that’s where the embed actually gets injected. Your container approach works, but #stream-player needs explicit dimensions for your 65% width. Try width: calc(65vw - 2vw) to account for your left offset, then set a reasonable height or use the padding-bottom trick for aspect ratio. Also, ditch the absolute positioning on .stream-js entirely - it’s just a script tag and doesn’t need positioning. Let stream-container and stream-player handle the positioning instead.