Why do I get duplicate iFrames on my interactive embed

API
1

Hey, I am having a problem,
When I start my interactive iFrame I get a duplicate one, under the same variable name, I use Web Server for chrome and my code looks like this (line[1] is equal to “moistcr1tikal”, also note that I have removed css styling):

<html>
 <script src= "https://player.twitch.tv/js/embed/v1.js"></script>

    <div class="Red" id="red_1"></div>
    <script>
    var txt, line;
    var line = []

    if (window.innerHeight > window.innerWidth) {
      player_width = (window.innerWidth-232)/4;
      player_height = ((window.innerWidth-232)/4)/1.77;
    } else {
      player_width = ((window.innerHeight-45)/8)*1.77;
      player_height = (window.innerHeight-45)/8;
    }

    var client = new XMLHttpRequest();
    client.open('GET', '../../Data/mcc teams.txt');
    client.onreadystatechange = function(){
        txt = client.responseText
        line = txt.split(",");

        var r1 = new Twitch.Player("red_1", {
          width: 200,
          height: 100,
          channel: line[1],
          allowfullscreen : "false",
          layout : "video",
          parent: ["127.0.0.1"]
        });
        r1.addEventListener(Twitch.Player.READY, function() {
          console.log(r1.getQualities());
          r1.setQuality("160p30")
          r1.setMuted(true)
        });


    }
    client.send()
    </script>
    </body>
</html>

The output looks like this:

image

And both of these end up within the same div class

2

Sounds like your JS code is running twice for some reason.

This alos sounds like something you can’t link us to to go lookat. Since its " Web Server for chrome" so cannot easily test your environment

3

Ok, so I found out that the XMLHttpRequest was activating twice, sometimes even three times. To fix it I just added an if statement to make sure it only called once:

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div class="Red" id="red_1"></div>
<script>
var txt, line
var line = []

var client = new XMLHttpRequest();
client.open('GET', '../../Data/mcc teams.txt');
client.onreadystatechange = function(){
  txt = client.responseText
  line = txt.split(",");
  console.log("egg")

  run()
}

var count = 0
function run() {
  if (count == 0) {
    var r1 = new Twitch.Player("red_1", {
      width: 200,
      height: 100,
      channel: "moistcr1tikal",
      parent: ["127.0.0.1"]
    });
    r1.addEventListener(Twitch.Player.READY, function() {
      console.log(r1.getQualities());
      r1.setQuality("160p30")
      r1.setMuted(true)
    });
    count = count + 1
  }
}
client.send()
</script>
</body>

I don’t know why my XML request occured multiple times but I fixed it.

4

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