# Twitch stream (embed) ignores height value?!

**URL:** <https://staging-discuss.dev.twitch.com/t/twitch-stream-embed-ignores-height-value/13961>\
**Category:** API\
**Created:** [January 26, 2018, 9:31pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-stream-embed-ignores-height-value/13961 "2018-01-26T21:31:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![thedevguy](https://avatars.discourse-cdn.com/v4/letter/t/50afbb/32.png) [@thedevguy](https://staging-discuss.dev.twitch.com/u/thedevguy)\
**Post date:** [January 26, 2018, 9:31pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-stream-embed-ignores-height-value/13961/1 "2018-01-26T21:31:27Z")

</div>

Hey.

I don’t know if I am missing an important thing here, or whatever I am doing wrong?! Any idea would be nice.  
I try to embed a stream onto a page, using this approach:

> **[Embedding Twitch](https://dev.twitch.tv/docs/embed)**
>
> Embedding Twitch on Your Website

```
		<!-- 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: "100%",
			height: "100%",
			channel: "monstercat",
			layout: "video"
		  });

```

However, the “height” value gets completely ignored when I do set a relative (percentage) value.  
Any absolute value (height: 500,) is working though?!?  
The width value is working fine for both (relative and absolute values) !!

Why?! This doesn’t make any sense?! Google couldn’t help me either as this certainly is a bit weird…?!

Thanks a lot for any help!!

---

<div class="post-metadata">

**Author:** ![3ventic](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/3ventic/32/298_2.png) [@3ventic](https://staging-discuss.dev.twitch.com/u/3ventic)\
**Post date:** [January 27, 2018, 11:31am UTC](https://staging-discuss.dev.twitch.com/t/twitch-stream-embed-ignores-height-value/13961/2 "2018-01-27T11:31:25Z")

</div>

It works; 100% does not mean 100% of the browser window, it’s 100% height of its parent, in this case `div#twitch-embed`. See [https://r.3v.fi/twitchembed.html](https://r.3v.fi/twitchembed.html) for a demonstration, where the width and height of the embed are set to 100% and there’s a button to toggle the parent’s (`div#twitch-embed`'s) height to `100vh`.

Source below as well.

```auto
<!DOCTYPE html>
<style>
html,body { margin: 0; padding: 0; position: relative; }
.style {
        position:absolute;
        top:0;
        right:0;
}
.full-height {
        height: 100vh;
}
#info-box {
        height: 20px;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
        border: 0;
        background: red;
        color: white;
        line-height: 20px;
        font-size: 20px;
        position: absolute;
        bottom: 0px;
        overflow: hidden;
}
</style>
<div class="style">
        <button id="style">Toggle twitch-embed height</button>
</div>
<div id="info-box">This is where document.body ends, at <span id="info"></span></div>
<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">
  new Twitch.Embed("twitch-embed", {
        width: '100%',
        height: '100%',
        channel: "monstercat"
  });
</script>

<script type="text/javascript">
var embed = document.getElementById('twitch-embed');
var info = document.getElementById('info');
var cls = 'full-height';

function updateInfo() {
        info.textContent = document.body.clientHeight + 'px, #twitch-embed height is ' + embed.clientHeight + 'px';
}
updateInfo();

document.getElementById('style').addEventListener('click', function() {
        if (embed.classList.contains(cls)) {
                embed.classList.remove(cls);
        } else {
                embed.classList.add(cls);
        }
        updateInfo();
});

</script>

```

---

<div class="post-metadata">

**Author:** ![thedevguy](https://avatars.discourse-cdn.com/v4/letter/t/50afbb/32.png) [@thedevguy](https://staging-discuss.dev.twitch.com/u/thedevguy)\
**Post date:** [January 27, 2018, 1:15pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-stream-embed-ignores-height-value/13961/3 "2018-01-27T13:15:15Z")

</div>

Omg thanks a lot for the heads up! Your source code was also helping tremendously, I don’t think I would’ve solved it without it. Thanks a lot!!!

---

<div class="post-metadata">

**Author:** ![system](https://d2spem0quai2ol.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://staging-discuss.dev.twitch.com/u/system)\
**Post date:** [February 26, 2018, 1:25pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-stream-embed-ignores-height-value/13961/4 "2018-02-26T13:25:28Z")

</div>

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