
import {Video} from 'kaleidoscopejs';
import {ContainerPlugin, Mediator, Events} from 'clappr';

export default class Video360 extends ContainerPlugin {
  constructor(container) {
    super(container);
    Mediator.on(`${this.options.playerId}:${Events.PLAYER_RESIZE}`, this.updateSize, this);
    let {height, width, autoplay} = container.options;
    container.playback.el.setAttribute('crossorigin', 'anonymous');
    this.viewer = new Video({height: isNaN(height) ? 300 : height, width: isNaN(width) ? 400 : width, container: this.container.el, source: this.container.playback.el});
    this.viewer.render();
  }

  get name() {
    return 'Video360';
  }

  updateSize() {
    setTimeout(() =>
      this.viewer.renderer.setSize({height: this.container.$el.height(), width: this.container.$el.width()})
    , 250)
  }
}


import {Video} from 'kaleidoscopejs';
import {ContainerPlugin} from 'clappr';

export default class Video360 extends ContainerPlugin {
  constructor(container) {
    super(container);
    this.listenTo(this.container, 'container:fullscreen', this.updateSize);
    let {height, width, autoplay} = container.options;
    container.playback.el.setAttribute('crossorigin', 'anonymous');
    this.viewer = new Video({height, width, container: container.el, source: container.playback.el});
    this.viewer.render();
  }

  get name() {
    return 'Video360';
  }

  updateSize() {
    setTimeout(() =>
      this.viewer.renderer.setSize({height: this.container.$el.height(), width: this.container.$el.width()})
    , 250)
  }
}

--- 
+++ 
@@ -1,14 +1,14 @@
 
 import {Video} from 'kaleidoscopejs';
-import {ContainerPlugin} from 'clappr';
+import {ContainerPlugin, Mediator, Events} from 'clappr';
 
 export default class Video360 extends ContainerPlugin {
   constructor(container) {
     super(container);
-    this.listenTo(this.container, 'container:fullscreen', this.updateSize);
+    Mediator.on(`${this.options.playerId}:${Events.PLAYER_RESIZE}`, this.updateSize, this);
     let {height, width, autoplay} = container.options;
     container.playback.el.setAttribute('crossorigin', 'anonymous');
-    this.viewer = new Video({height, width, container: container.el, source: container.playback.el});
+    this.viewer = new Video({height: isNaN(height) ? 300 : height, width: isNaN(width) ? 400 : width, container: this.container.el, source: this.container.playback.el});
     this.viewer.render();
   }
 
Fix plugin scaling when player size is set in percents or player is resized at runtime
