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>
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)
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…