Cannot get embed to display video on my website

I’m working on a streamer website and would like to embed twitch clips using the iframe tag. I’m using node.js with express for my backend, if that helps. However, I am getting an error that displays as so:

[Refused to display ‘https://clips.twitch.tv/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.]

Here is my related code:

<div class="flex-info">
        <iframe
           src="https://clips.twitch.tv/embed?clip=ReliableColdbloodedKuduDxAbomb-4gw58pm3M1lvaj1A"
           height="360"
           width="640"
           allowfullscreen="true" autoplay= "false" SameSite=None>
        </iframe>
      </div>

I did not specify the parent since JS does that for me already.

I’m fairly new to coding so there is a lot I don’t understand, any help would be much appreciated.

You showed iFrame code not JS code.
So I’m assuming you did the iFrame and the JS didn’t work.
And this isn’t the generated iFrame from inspector but your HTML from view source.

Nethertheless, need the actual code you used an the link to your web page with the code on to investigate.

I see, sorry about that. This is the JS code that access the twitch API on my node js server:

  const req = https.request(url, options, function(response){
    console.log( "1. statusCode:", response.statusCode);
    // console.log("2. headers:", response.headers);
    response.on("data", function(data){

      let myObj = data;
      AT = JSON.parse(myObj).access_token;
      // process.stdout.write(data);
      console.log("---------------------------")
    });
  });

  req.on('error', (e) => {
    console.error("error 1: "+ e);
    console.log("passed through here");
  });

  req.end();

// GET requests for channel and channel clips
app.get("/", function(req, res){

  const optionals = {
    method: "GET",
    dataType: 'json',
    headers: {
      "Client-ID": process.env.CLIENT_ID,
      Authorization: "Bearer " + AT,
      Accept: "application/vnd.twitchtv.v5+json"
    }
  }

    https.get("https://api.twitch.tv/helix/users?login=veeetag", optionals, function(response){
      console.log('3. statusCode:', response.statusCode);
      // console.log("4. headers:", response.headers);

      response.on("data", (d) => {
        let channel = JSON.parse(d);
        console.log(channel);
        userId = channel.data[0].id;
        console.log('--------------------------');
        // process.stdout.write(d);
      });
    }).on("error", (e) => {
      console.error("error 2: " + e);
    });

// other url = 'https://api.twitch.tv/kraken/clips?id=' + userId

setTimeout(() => {
  https.get('https://api.twitch.tv/helix/clips?broadcaster_id=' + userId, optionals, function(resp){
    console.log('3. statusCode:', resp.statusCode);
    // console.log("4. headers:", resp.headers);
    resp.on('data', (da) => {
      // let clips = JSON.parse(da);
      // console.log(clips);
      process.stdout.write(da);
    });
  }).on("error", (e) => {
    console.error("error 2: " + e);
  });
}, 1000);

None of that generates an iFrame or the JS to render a iFrame as per the Embed docs.

Given additionally that the Clips Emebds doesn’t use the Embed JS lib anyway. (Which I forgot so there is no JS to auto attach a parent when embedding clips)

So your generated HTML is missing the required parent .

I was after your frontend JS not the server JS.

I have been trying to understand the docs for this for some time. I followed the Non-Interactive IFrames for Clips section since that was my intended target. Which is what I have right now.

I do not remember seeing any requirements in the docs for front end js to get the iframes working. If I missed that could you point me to the section it states that, thank you.

Fron the linked docs

<iframe
    src="https://clips.twitch.tv/embed?clip=<slug>&parent=streamernews.example.com"
    height="<height>"
    width="<width>"
    allowfullscreen="<allow full screen>">
</iframe>

From yoir OP

        <iframe
           src="https://clips.twitch.tv/embed?clip=ReliableColdbloodedKuduDxAbomb-4gw58pm3M1lvaj1A"
           height="360"
           width="640"
           allowfullscreen="true" autoplay= "false" SameSite=None>
        </iframe>

You are missing a &parent=exmample.com from the iframe src where example.com would be your domain

Your claim here only applies whe using embed everywhere, the JS Lib Twitch provides for embedding live streams and vods but NOT clips. For clips you have to add the parent manually.

Docs are specically

Iframe Attributes

Name Type Description
allowfullscreen boolean If true, the player can go full screen.
clip string A globally unique string called a slug, by which clips are referenced.
height number or string Height of the embedded window, in pixels. This can be expressed as a percentage, by passing a string like 50%. Recommended minimum: 300.
parent string (required) Domain(s) that will be embedding Twitch. You must have one parent key for each domain your site uses.

Where parent is appened to the iFrame src (rather than an attribute) as per the example

Thank you, that got it to work. I initially had the parent in there but the embed still didn’t work. I guess there were multiple issues. Well now it works. Thanks again

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