# Showing separate player and chat

**URL:** <https://discuss.dev.twitch.com/t/showing-separate-player-and-chat/33358>\
**Category:** API\
**Created:** [September 2, 2021, 11:34am UTC](https://discuss.dev.twitch.com/t/showing-separate-player-and-chat/33358 "2021-09-02T11:34:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Streamz](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@Streamz](https://discuss.dev.twitch.com/u/Streamz)\
**Post date:** [September 2, 2021, 11:34am UTC](https://discuss.dev.twitch.com/t/showing-separate-player-and-chat/33358/1 "2021-09-02T11:34:51Z")

</div>

Hey guys,  
Last daft question I promise …

OK so trying to make this as responsive as possible I want to break up the player and the chat  
Don’t really want to use iframes as Google red flags these on page and for what I want to do with this project I can’t have that …

So my question is this …

I have a div with ID twitch-embed and I’m only showing the video ( without chat ) in this  
and this works OK  
However I now want to create a second instance only for the chat  
I have tried the below but it doesn’t work as it loads the video as well on top

```auto
window.onload = function(){
      new Twitch.Embed("twitch-embed", {
        width: "100%",
        height: "450px",
        theme: "dark",
        channel: "<?php echo $username;?>",
	layout: "video"
      });
	  new Twitch.Embed("twitch-chat", {
        width: "100%",
        height: "100%",
        theme: "dark",
        channel: "<?php echo $username;?>",
	layout: "chat"
      });
	  }

```

Really don’t want to use an iframe if I can help it so any advice would be great

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [September 2, 2021, 11:40am UTC](https://discuss.dev.twitch.com/t/showing-separate-player-and-chat/33358/2 "2021-09-02T11:40:15Z")

</div>

> [@Streamz](#):
>
> Really don’t want to use an iframe if I can help it so any advice would be great

This code _generates_ an iFrame.

The only way a Twitch Embed works is via an iFrame

> [@Streamz](#):
>
> I have tried the below but it doesn’t work as it loads the video as well on top

Embed everywhere doesn’t support “chat” so to do chat on it’s own you’ll ned a manual iFrame

 ![image](https://d2opxh93rbxzdn.cloudfront.net/original/2X/f/f50a946c926204fee2a638de9833bf50f98224ac.png)

You’ll need to use a “manual” iFrame rather than a JS generate one

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

> [@Streamz](#):
>
> work as it loads the video as well on top

To get the two side by side you’ll need to use CSS to adjust the two divs as needed `twitch-embed` and `twitch-chat`

---

<div class="post-metadata">

**Author:** ![Streamz](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@Streamz](https://discuss.dev.twitch.com/u/Streamz)\
**Post date:** [September 2, 2021, 11:48am UTC](https://discuss.dev.twitch.com/t/showing-separate-player-and-chat/33358/3 "2021-09-02T11:48:01Z")

</div>

Bingo !  
Thanks Barry …  
I tried to use the iframe directly for the player previously but kept getting errors but yep this works and I now found the error that previously occurred

---

<div class="post-metadata">

**Author:** ![Streamz](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@Streamz](https://discuss.dev.twitch.com/u/Streamz)\
**Post date:** [September 2, 2021, 11:56am UTC](https://discuss.dev.twitch.com/t/showing-separate-player-and-chat/33358/4 "2021-09-02T11:56:04Z")

</div>

Is there a way I can make the chat theme dark as

```auto
src="https://www.twitch.tv/embed/<?php echo $username;?>/chat?parent=MYDOMAIN&theme=dark" height="75%" width="100%" frameborder="0"

```

Just shows the white theme

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [September 2, 2021, 11:58am UTC](https://discuss.dev.twitch.com/t/showing-separate-player-and-chat/33358/5 "2021-09-02T11:58:04Z")

</div>

> [@Streamz](#):
>
> Is there a way I can make the chat theme dark as

There isn’t a documented theme control

It should honor the users preferences and/or the user can change it themself

Try adding `&darkpopout` to the end of the url. that has worked for people in the past

---

<div class="post-metadata">

**Author:** ![Streamz](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@Streamz](https://discuss.dev.twitch.com/u/Streamz)\
**Post date:** [September 2, 2021, 12:00pm UTC](https://discuss.dev.twitch.com/t/showing-separate-player-and-chat/33358/6 "2021-09-02T12:00:59Z")

</div>

Legend ! Thanks

---

<div class="post-metadata">

**Author:** ![system](https://d2opxh93rbxzdn.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://discuss.dev.twitch.com/u/system)\
**Post date:** [October 2, 2021, 12:01pm UTC](https://discuss.dev.twitch.com/t/showing-separate-player-and-chat/33358/7 "2021-10-02T12:01:50Z")

</div>

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