Steam Twitch Cannel on wordpress

Insights
1

Hi there. I have tired to follow the article here

and add a channel to my wordpress page. When I add the code (with my details) it puts in 2 or 3 iframes and not one. The page is still in development but can be viewed here
https://pdq.com.au/xpesport/
I need to get one steam under one of my headsing and 1 stream under the other.
Is anyone able to help me.

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="<player div ID>"></div>
<script type="text/javascript">
  var options = {
    width: <width>,
    height: <height>,
    channel: "<channel ID>",
    // only needed if your site is also embedded on embed.example.com and othersite.example.com
    parent: ["embed.example.com", "othersite.example.com"]
  };
  var player = new Twitch.Player("<player div ID>", options);
  player.setVolume(0.5);
</script>
2

First off since using the JS lib, you can omit parent: ["embed.example.com", "othersite.example.com"] completely

Checking your source code you have the JS call to create a player in the code Twitce.

Looking at your code, you have two blocks that are identical.

Two calls to create a player, wiht both calls targetting the same div id
And your div is in the code twice with the same ID.

Hence you got unexepected results.

So you need

<div id="player_one"></div>
<script>
  var options = {
    width: 1280,
    height: 720,
    channel: "xphsl"
  };
  var player = new Twitch.Player("player_one", options);
  player.setVolume(0.5);
</script>

<div id="player_two"></div>
<script>
  var options = {
    width: 1280,
    height: 720,
    channel: "xpesportstv"
  };
  var player = new Twitch.Player("player_two", options);
  player.setVolume(0.5);
</script>

Then put the divs wherever is relevant on the page.
(don’t forget to put the embed.js in the header/somewhere on the page)

3

Thanks for getting back to me Barry. I added the code you sent and embeded the js file and it works just as I want it to now. Thank you so much for helping me with this.
https://pdq.com.au/xpesport/
Thanks
Tony

4

https://pdq.com.au/xpesport/

I tried width: 100% but that breaks the code. Any ideas how I do this please.
Thanks
Tony

5

well it woulkd be width: '100%'

But theres no broken embed on the linked page

6

Thanks for your reply. I added the 100%. I didn’t have the ’ before and after the 100%.
But what height do you add?
I have done the right hand video so you can see the difference

7

Sounds like you need something like a responsive embed

An example of that is here How To Create Responsive Iframes

8

Thanks Barry, I will give it a go.

9

Hi there, sorry but If I use a iframe, what goes into the example.com text?

<iframe src="https://player.twitch.tv/?channel=xpesportstv&parent=www.example.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

Can I take that part out and use this?

If using the responsive iframe I don't need the height and width here do I?
10

If using manual iFrame instead of the JS lib example.com needs to be replaced with yours domain name and multiple parent’s included for variations of domains

11

I prefer to use the JS lib example but not sure how to set that up so it is responsive
How would I do that

12

I have tried lots of ways to get this working but still can’t get it sorted out

These 2 now have different settings but I can’t get the video to be full height. I have to px values and percentage values

https://pdq.com.au/xpesport/
I have added the 2 divs with the responsive code on the right and then just the container on the left hand one. The green line shows the container div and the red line shows the responsive div.

What am I doing wrong?