Showing separate player and chat

API
1

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

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

2

This code generates an iFrame.

The only way a Twitch Embed works is via an iFrame

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

image
image966×123 19.2 KB

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

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

3

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

4

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

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

5

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

6

Legend ! Thanks

7

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