How to adjust Twitch player dimensions in web layout

[Stella_Dreamer]

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

Here’s my current HTML setup:

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

And my CSS:

.stream-container {
    position: relative;
    float: right;
    right: 1vw;
    top: 2vh;
}

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

The problem is that styling the script tag doesn’t seem to affect the actual player size. The embed still doesn’t fit properly in the 65% space I want it to occupy. What’s the correct way to control the Twitch embed dimensions to make it work with my layout?

[sophiac]

Twitch embeds are notorious for sizing issues. Skip the percentage headaches and use the padding-bottom trick instead. Wrap your #player-wrapper in another div, set padding-bottom: 56.25% (16:9 ratio) and position: relative. Make #player-wrapper absolutely positioned: top: 0; left: 0; width: 100%; height: 100%. Don’t set width/height in your Twitch.Embed config - let the container do the work. This keeps proper aspect ratio while filling your 65% layout space perfectly. I’ve used this on tons of video embeds and it’s bulletproof.

[charlottew]

You’re styling the script tag instead of the container that holds the player. Twitch embeds create their own iframe structure inside the #player-wrapper div, so put your dimensions there instead. Move your CSS to #player-wrapper: css #player-wrapper { width: 65vw; height: 85vh; position: relative; float: right; right: 1vw; top: 2vh; } Drop the width and height from your Twitch.Embed config or use specific pixel values instead of percentages. The embed script gets wonky with percentages when container sizes change. I’ve dealt with this before - controlling dimensions through the wrapper div and letting the embed fill that space works way better.

[Laura219]

Check your parent domains array - Twitch blocks embeds when that’s wrong. Add layout: "video" to your embed config, it fixes sizing issues. Your CSS looks overcomplicated too, just use width: 65vw on the wrapper div.

[SparklingGem]

yeah, twitch’s embed api is kinda finicky w/ responsive sizing. set fixed pixel values in your twitch.embed config - width: 800, height: 450 - then use css transform scale on the wrapper to fit your 65% space. try transform: scale(0.8). not pretty, but it works when percentages fail.

[scarlettturner]

Twitch embeds don’t play nice with responsive containers. Ditch the floats and use flexbox instead - you’ll get way better control over that 35/65 split. Set your parent to display: flex, give the image container flex: 0 0 35% and the stream container flex: 1. For the embed, hardcode dimensions in the JS config like width: 650, height: 400 instead of percentages. Then slap width: 100%; height: auto; on the #player-wrapper. This keeps the aspect ratio intact while fitting your space. I’ve dealt with this before - Twitch’s API hates being responsive natively but works great when you give it fixed dimensions and let CSS handle the scaling.