Embedded Twitch style doesn't work

API
1

Hi ! I’m creating a website where I want to put an embedded Twitch player. I tried to make the size up to 80% of the width and 80% of the height, but the style modification I make to the twitch-embed div aren’t working. Moreover, the height I put to the Twitch player isn’t working either, the height is the same whether I put 1% or 100%, and it’s always a super small size (clearly under 400 pixels)… There is my code :

<body>
  <div class="wrapper">
    <!-- my header -->
    <div class="content">
      <div id="twitch-embed"></div>
    </div>
  </div>
  <!-- my footer -->

  <!-- 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">
    new Twitch.Embed("twitch-embed", {
      width: '80%',
      height: '100%',
      channel: "monstercat"
    });
  </script>
</body>

My css :

div#twitch-embed {
    margin-left: auto;
    margin-right: auto;
}

And this is what I get…

image_2022-06-12_144340545
image_2022-06-12_1443405451632×922 145 KB

Does anyone have an idea of the reason the embedded twitch player isn’t working the way I wish it would ? Thanks a lot for your help !

2

You set the width and height in percentages
So the iframe will grow to the size of the parent div.
so the parent div which is .content doesn’t have a lot of height to play with.
So you get unexpected dimensions.

So you can see the the iframe is 80% of the widgth of the parent
And 100% of the height of the parent.

The parent doesn’t have any height as 100% of nothing is nothing. (the parent is not 100% height of the web page as “natural” websites don’t have a defined height)
But the parent did is display block so has the width of the webpage.

So your code is correct, but the parent div has no height

This isn’t a fault in the embed but your website css.

A common fix/hack is to make the parent did have height.
Or if it’s supposed to be 100% of the page, set the parent div to (which is a cheat but a start point to get you going)

.content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
3

But the .content div has 50vh of min-height…

Also, if I put the height of the embedded player in the JS part to a size in pixel, the player adapt well, but I want to put the height a certain %, not to a fixed amount of pixels…

4

without checking in inspector myself not sure what is inheriting or not inheriting as expected

Force heights generally just work percentages can be weird

Bootstrap has a good guide on responsive divs an aspect ratios that might be of interest

which is in part based on

Sure you might not be making it responsive but the logic applies when dealing with percentages and iFrames

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.