Ember.js support for embedded interactive video - iframe bug

[Argus9]

TLDR:

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!

[1]

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 = {
      width,
      height,
      channel
    };

    let player;

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

    this.set('player', player);

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

[2]

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

[3]

"use strict";

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

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

  app.import("vendor/twitch-embed/embed.js");
  app.import("vendor/twitch-embed/player.js");

  return app.toTree();
};

[4]

<body>
  <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();
      player.setMuted(false);
      player.setVolume(0.5);
    });

    const player = new Twitch.Player("player-container", options);
    player.addEventListener(Twitch.Player.READY, function() {
      player.setMuted(true);
    });
  </script>
</body>