Embedding a Twitch Channel into a google site : learnprogramming

Hey guys, I don’t know much about coding and am attempting to embed my twitch channel onto a website I made, which is being hosted with google sites. (lordpretzelsempire.org)

Below is the code I am using, I got it from https://github.com/BarryCarlyon/twitch_misc/tree/main/player/googlesites which seemed to work at first, as in the site editor it works perfectly. Unfortunately, on the published page itself the players give me the error of “player.twitch.tv refused to connect” and “embed.twitch.tv refused to connect”.

Again, the code works just fine when I am editing the site, but not at all when the site is published, can anyone give me some help?

<html>
  <head>
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'">
<script src= "https://embed.twitch.tv/embed/v1.js"></script>
  </head>
  <body>

<iframe src="https://player.twitch.tv/?channel=lord_pretzels_gaming&muted=true" id="target_frame" style="width: 800px; height: 400px;"></iframe>

<div id="test"></div>

<div id="controls">
    <div id="status"></div>

    <button id="play">Play</button>
    <button id="pause">Pause</button>

    <select id="volume_value">
        <option>0</option>
        <option>0.1</option>
        <option>0.2</option>
        <option>0.3</option>
        <option>0.4</option>
        <option>0.5</option>
        <option>0.6</option>
        <option>0.7</option>
        <option>0.8</option>
        <option>0.9</option>
        <option>1</option>
    </select>
    <button id="volume">Set Volume</button>
    <button id="volume_get">Get Volume</button>

    <button id="muted">Get Muted</button>
    <button id="mute">Mute</button>
    <button id="unmute">Unmute</button>

<br />

    <input type="text" id="channel" value="lord_pretzels_gaming" />
    <button id="change">Change Channel</button>

    <select id="quality"></select>
    <button id="quality_change">Change Quality</button>
    <button id="qualities_get">Get Qualities</button>
    <button id="quality_get">Get Quality</button>
</div>

<div style="width: 800px; position: relative;">
  <div id="log"></div>
  <div id="logb" style="position: absolute; top: 0px; right: 0px;"></div>
</div>

<script type="text/javascript">
  var parent = ['sites.google.com', 'www.gstatic.com', window.location.host];
  console.log(parent);
  document.getElementById('target_frame').setAttribute('src', document.getElementById('target_frame').getAttribute('src') + '&parent=' + parent.join('&parent='));

  var options = {
    width: 800,
    height: 500,
    channel: "lord_pretzels_gaming",
    allowfullscreen: false,
    layout: "video-with-chat",
    muted: true,
    parent
  };
  var player = new Twitch.Embed("test", options);

  function log(txt, other) {
    var sp = document.createElement('div');
    sp.textContent = new Date().getTime() + ': ' + txt;

    var t = other ? 'logb' : 'log';
    document.getElementById
  }

  player.addEventListener(Twitch.Embed.VIDEO_READY, function() {
    log('The video is ready');
  })
  player.addEventListener(Twitch.Embed.VIDEO_PLAY, function() {
    log('The video is playing');
  })

  document.getElementById('play').addEventListener('click', (e) => {
    log('Attempt Play');
    player.play();
  });
  document.getElementById('pause').addEventListener('click', (e) => {
    log('Attempt Pause');
    player.pause();
  });
  document.getElementById('volume').addEventListener('click', (e) => {
    log('Attempt Volume: ' + document.getElementById('volume_value').value);
    var val = parseFloat(document.getElementById('volume_value').value);
    player.setVolume(val);
  });
  document.getElementById('volume_get').addEventListener('click', (e) => {
    log('Attempt Get Volume');
    log('Volume ' + player.getVolume());
  });

  document.getElementById('mute').addEventListener('click', (e) => {
    log('Attempt Mute');
    player.setMuted(true);
  });
  document.getElementById('unmute').addEventListener('click', (e) => {
    log('Attempt UnMute');
    player.setMuted(false);
  });
  document.getElementById('muted').addEventListener('click', (e) => {
    log('Attempt Get muted');
    log(player.getMuted());
  });

  setInterval(() => {
    var status = '';

    if (player.isPaused()) {
      status += 'Paused ';
    } else {
      status += 'Playing ';
    }

    if (player.getMuted()) {
      status += 'Muted ';
    } else {
      status += 'UnMuted ';
    }
    status += 'Vol: ' + player.getVolume();

    status += ' ' + player.getQuality();

    document.getElementById('status').textContent = status;
  }, 250);

  document.getElementById('change').addEventListener('click', (e) => {
    var channel = document.getElementById('channel').value;
    log('Change channel ' + channel);
    player.setChannel(channel);
  });

  document.getElementById('quality_get').addEventListener('click', (e) => {
    log('Fetch Quality');
    log(player.getQuality());
  });
  document.getElementById('qualities_get').addEventListener('click', (e) => {
    log('Fetch Qualities');

    var target = document.getElementById('quality');
    target.textContent = '';

    var qol = player.getQualities()
    for (var x=0;x<qol.length;x++) {
      var opt = document.createElement('option');
      opt.value = qol[x].group;
      opt.textContent = qol[x].name;
      target.append(opt);
    }
  });
  document.getElementById('quality_change').addEventListener('click', (e) => {
    var target = document.getElementById('quality').value;
    log('Set quality to ' + target);
    player.setQuality(target);
  });

  var events = [
    Twitch.Player.ENDED,
    Twitch.Player.PAUSE,
    Twitch.Player.PLAY,
    Twitch.Player.PLAYBACK_BLOCKED,
    Twitch.Player.PLAYING,
    Twitch.Player.OFFLINE,
    Twitch.Player.ONLINE,
    Twitch.Player.READY
  ]
  for (var x=0;x<events.length;x++) {
    quickBind(events[x]);
  }
  function quickBind(evt) {
    player.addEventListener(evt, (e) => {
      log('Captured ' + evt, true);
    });
  }
</script>

  </body>
</html>

Leave a Comment