Fix YT video sizing

scripts/components/Dialog/InteractionContent.js

@@ -46,6 +46,44 @@ export default class InteractionContent extends React.Component {
     }
   }
 
+  /**
+   * Make it easy to bubble events from child to parent.
+   * @param {object} origin Origin of event.
+   * @param {string} eventName Name of event.
+   * @param {object} target Target to trigger event on.
+   */
+  bubbleUp(origin, eventName, target) {
+    origin.on(eventName, (event) => {
+      // Prevent target from sending event back down
+      target.bubblingUpwards = true;
+
+      // Trigger event
+      target.trigger(eventName, event);
+
+      // Reset
+      target.bubblingUpwards = false;
+    });
+  }
+
+  /**
+   * Make it easy to bubble events from parent to children.
+   * @param {object} origin Origin of event.
+   * @param {string} eventName Name of event.
+   * @param {object[]} targets Targets to trigger event on.
+   */
+  bubbleDown(origin, eventName, targets) {
+    origin.on(eventName, (event) => {
+      if (origin.bubblingUpwards) {
+        return; // Prevent send event back down.
+      }
+
+      targets.forEach((target) => {
+        // If not attached yet, some contents can fail (e. g. CP).
+        target.trigger(eventName, event);
+      });
+    });
+  }
+
   /**
    * Initialize content.
    * @param {HTMLElement} contentRef Content DOM reference.
@@ -94,6 +132,12 @@ export default class InteractionContent extends React.Component {
       });
     }
 
+    // Resize parent when children resize
+    this.bubbleUp(this.instance, 'resize', this.context);
+
+    // Resize children to fit inside parent
+    this.bubbleDown(this.context, 'resize', [this.instance]);
+
     this.setState({
       isInitialized: true,
     });
@@ -109,7 +153,7 @@ export default class InteractionContent extends React.Component {
       this.instance.on('loaded', () => this.props.onResize(!isWide));
     }
 
-    this.instance.on('resize', () => this.props.onResize());
+    // this.instance.on('resize', () => this.props.onResize());
     this.instance.on('xAPI', (event) => {
       if (
         event.data.statement.verb.id ===

scripts/components/Dialog/InteractionContent.scss

@@ -13,6 +13,16 @@
   width: 100%;
   height: 100%;
   padding: 0;
+
+  &.h5p-youtube {
+    background-color: #000;
+    &> div {
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
 }
 
 .h5p-text-dialog.h5p-video {