Resize the twitch embed

Question

I'm using the embed twitch service on my website but I don't know how to resize it as I want. this is actually the website https://i.stack.imgur.com/mS2sE.jpg,

this is the html:

<!--twitch: https://dev.twitch.tv/docs/embed/everything-->
<div class="twitch-stream">
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
    <script type="text/javascript" class="twitch-stream-script">
        new Twitch.Embed("twitch-embed", {
            width: "100%",
            height: "100%",
            theme: "dark",
            channel: "Monstercat",
            // only needed if your site is also embedded on embed.example.com and othersite.example.com 
            parent: ["embed.example.com", "othersite.example.com"]
        });
    </script>
</div>

and the css:

.twitch-stream {
position: relative;
float: right;
right: 0.5vw;
top: 1vh;

}

.twitch-stream-script {
position: relative;
top: 100vh;
max-width: 65%;
max-height: 90vh;

}

as you can see i have the pic on the left and it occupies the 35% of the page and i would like if the streaming occupies the rest of it (65%). How do I do that?

I thought about styling, via css, the script but i can't do it (it is actually in the code but, with or without it doesn't change anything)

score 1 · Answer 1 · answered Jul 13 '20 at 23:08

You should bound your twitch in a div and css on it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #avatar_wrapper {
            width: 35%;
            display: inline-block;
        }
        #twitch_wrapper {
            width: 65%;
            display: inline-block;
            float: right;
        }
        .clear {
            clear: both;
        }

    </style>
    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
</head>
<body>

<div id="container">

    <div id="avatar_wrapper">
        your image here
    </div>

    <div id="twitch_wrapper">
        <!--twitch: https://dev.twitch.tv/docs/embed/everything-->
        <div class="twitch-stream">
            <!-- Add a placeholder for the Twitch embed -->
            <div id="twitch-embed"></div>

            <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
            <script type="text/javascript" class="twitch-stream-script">
                new Twitch.Embed("twitch-embed", {
                    width: "100%",
                    height: "100%",
                    theme: "dark",
                    channel: "Monstercat",
                    // only needed if your site is also embedded on embed.example.com and othersite.example.com
                    parent: ["embed.example.com", "othersite.example.com"]
                });
            </script>
        </div>
    </div>
    <div class="clear"></div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, facere harum maiores molestias mollitia neque officia pariatur, quidem rem repellat sint voluptas? Atque, libero magnam maiores modi molestias omnis tempore?</p>

</div>

</body>
</html>

Resize the twitch embed

1 Answers1