Ember.js support for embedded interactive video - iframe bug


new Twitch.Player, when used to render a player in an Ember.js template, embeds the iframe with an incorrect “src” attribute such that it points to my local server, not player.twitch.tv. This causes a black box to appear with no video player.

Full question:

I am working on an Ember.js project that embeds videos in a page. So far I’ve had success getting the “Embed Everything” and “Non-interactive video” examples to work by placing the video in a component which manages the initialization and state of the player. However, interactive videos do not work. The iframe is inserted into the page, but nothing renders - no video, no overlay.

The component [1] and template [2] are below. And I’m importing the Embed and Player javascript files into my project in my ember-cli-build.js file (see [3] below). I’ve downloaded the v1.js files from both “embed.twitch.tv” and “player.twitch.tv” and placed them both in my vendor directory, giving them unique names so I can import them both. I’ve also tried importing just the player library but this has no effect, so I don’t think there’s any sort of conflict.

What’s interesting is, the iframe is being inserted, but its src is set to http://localhost:4200/ not https://player.twitch.tv/. This appears to be the issue but I can’t seem to pin down why it’s happening. The following is the iframe that is inserted by new Twitch.Player:

<iframe src="http://localhost:4200/?allowfullscreen&amp;channel=kinggothalion&amp;origin=http%3A%2F%2Flocalhost%3A4200" scrolling="no" allow="autoplay; fullscreen" allowfullscreen="" style="width: 100%; height: 100%; margin: 0px; padding: 0px;" width="400" height="300" frameborder="0"></iframe>

I’ve also created a simple .html page that follows the examples in the API guides, and this does allow me to embed the full player and interactive video player in the same page (see [4]).

Is anyone able to help me figure out why the interactive player is being initialized in this way? I could do something kludgey like change the iframe src on init, but that has its own problems - like callback events not firing like they should. If we can get to the bottom of this, I’d like to. Thank you!


import Component from "@ember/component";
import $ from "jquery";

export default Component.extend({
  type: "full",
  muted: false,

  didRender() {
    const width = 400;
    const height = 300;
    const channel = this.get("streamerName");
    const container = `${this.get("elementId")}-embed`;

    const interactiveOptions = {

    let player;

    switch (this.get("type")) {
      case "full":
        player = new Twitch.Embed(container, interactiveOptions);
        player.addEventListener(Twitch.Embed.VIDEO_READY, function() {
      case "interactive-video":
        player = new Twitch.Player(container, interactiveOptions);
        player.addEventListener(Twitch.Player.READY, function() {
      case "non-interactive-video":
          `<iframe src="https://player.twitch.tv/?channel=${channel}&muted=${this.muted}&quality=low" height="${height}" width="${width}" frameborder=0></iframe>`

    this.set('player', player);

    const containerIframe = `#${container} iframe`;
      width: "100%",
      height: "100%",
      min_height: "100%",
      margin: "0",
      padding: "0"


<div id="{{elementId}}-embed" style="width: 100%; height: 100%;"></div>


"use strict";

const EmberApp = require("ember-cli/lib/broccoli/ember-app");

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here


  return app.toTree();


  <div id="embed-container"></div>
  <div id="player-container"></div>

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

  <script type="text/javascript">
    const options = {
      width: 1200,
      height: 480,
      channel: "kinggothalion"

    const embed = new Twitch.Embed("embed-container", options);
    embed.addEventListener(Twitch.Embed.VIDEO_READY, function() {
      const player = embed.getPlayer();

    const player = new Twitch.Player("player-container", options);
    player.addEventListener(Twitch.Player.READY, function() {

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