# How to position embed twitch on my webpage?

**URL:** <https://staging-discuss.dev.twitch.com/t/how-to-position-embed-twitch-on-my-webpage/21910>\
**Category:** API\
**Created:** [July 23, 2019, 10:05pm UTC](https://staging-discuss.dev.twitch.com/t/how-to-position-embed-twitch-on-my-webpage/21910 "2019-07-23T22:05:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SpyBanter](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/spybanter/32/6764_2.png) [@SpyBanter](https://staging-discuss.dev.twitch.com/u/SpyBanter)\
**Post date:** [July 23, 2019, 10:05pm UTC](https://staging-discuss.dev.twitch.com/t/how-to-position-embed-twitch-on-my-webpage/21910/1 "2019-07-23T22:05:03Z")

</div>

Hi, i have embed twitch video and chat, but i havent figured out how to position it?  
code:  
`

```
<!-- 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">
  var embed = new Twitch.Embed("twitch-embed", {
    width: "90%",
    height: "60%",
    channel: "monstercat",
    layout: "video-with-chat",
    autoplay: false
  });

  embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
    var player = embed.getPlayer();
    player.play();
  });
</script>`
```

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [July 23, 2019, 10:49pm UTC](https://staging-discuss.dev.twitch.com/t/how-to-position-embed-twitch-on-my-webpage/21910/2 "2019-07-23T22:49:29Z")

</div>

Your code is missing a

`<div id="twitch-embed"></div>`

CSS positioning can be applied to that.

> **[Everything](https://dev.twitch.tv/docs/embed/everything/)**
>
> Embedding Everything

---

<div class="post-metadata">

**Author:** ![SpyBanter](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/spybanter/32/6764_2.png) [@SpyBanter](https://staging-discuss.dev.twitch.com/u/SpyBanter)\
**Post date:** [July 24, 2019, 7:14am UTC](https://staging-discuss.dev.twitch.com/t/how-to-position-embed-twitch-on-my-webpage/21910/3 "2019-07-24T07:14:32Z")

</div>

Thanks, one more question, why i cant click on anything? Cant click chat, pause the stream or even change volume. I can just see the stream and chat.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [July 24, 2019, 9:48am UTC](https://staging-discuss.dev.twitch.com/t/how-to-position-embed-twitch-on-my-webpage/21910/4 "2019-07-24T09:48:56Z")

</div>

No idea. Works fine for me.

Sounds like you have some CSS/layout borking up and throwing a transparent div in the way

---

<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:** [August 23, 2019, 9:48am UTC](https://staging-discuss.dev.twitch.com/t/how-to-position-embed-twitch-on-my-webpage/21910/5 "2019-08-23T09:48:57Z")

</div>

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