Impossible to embed Twitch clips on website

Hi,

I am trying to embed a clip onto my Website. Which is a Google Sites.

Here's the code i used. and i get this error Refused to frame 'https://clips.twitch.tv/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.itzpomme.ca https://sites.google.com".

You are not accounting for the iframe stack including the one with atari in the URL.

See my notes here twitch_misc/player/googlesites at main · BarryCarlyon/twitch_misc · GitHub

iframe src=“Twitch” frameborder=“0” allowfullscreen=“true” scrolling=“no” height=“378” width=“620”></iframe
It looks like it didn’t take my iframe well i don’t see it in my description.
I don’t see what you are talking about with the atari in the url i don’t find it. i don’t know much about coding

When you make a embed on google pages.
The page you put the embed on is put inside another iframe.
And then that iframe is what appears on your website.

Your current code is not declaring the middle iframe.

The middle iframe often includes atari in the URL to that iframe.

So what i understand is that google sites already uses iframe to work, and i can’t put another iframe in unless i put an atari-based url? but where can i get that atari-based url?

<iframe src="https://www.twitch.tv/embed/monstercat/chat" id="chat_frame" style="width: 800px; height: 400px;"></iframe>

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

You’d just swap the src for the clip URL. And probably use a different ID on the iframe HTML

1 Like

Thank you very much

Well i though it worked, it’s working in my preview while editing the site but it doesn’t when i view it like a visitor would.
i still get the same error.

link to page with broken embed please

the last Iframe in the page is broken.

Try

<iframe src="https://clips.twitch.tv/embed?clip=PoisedRespectfulFishKappaPride-HAk1uuN7rijCmJy1" id="chat_frame" style="width: 800px; height: 400px;"></iframe>

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

it worked after i put as parent my domain. thanks

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