Custom Interactive Video

Hello David,

It looks like what you're missing is the handling of the 'resize' events. This is needed because your content type will have to change size when the video is loaded and the interactive video changes size.

This is how I would set it up:

H5P.DummyLib = (function ($, EventDispatcher, InteractiveVideo) {

  /**
   * Constructor function.
   */
  function DummyLib(options, id, contentData) {
    var self = this;

    // Keep track of our Interactive Video
    var IV;

    /**
     * Attach IV to given $container. Creates new IV if there is none.
     */
    self.attach = function ($container) {
      if (IV === undefined) {
        IV = H5P.newRunnable({
          library: 'H5P.InteractiveVideo 1.10', // Must match library.json
          params: options,
          userDatas: contentData
        }, id, $container, false, {parent: self});

        // Handle video resizing
        IV.on('resize', function () {
          self.trigger('resize');
        });
      }
      else {
        IV.attach($container);
      }
    };
  }

  return DummyLib;
})(H5P.jQuery, H5P.EventDispatcher, H5P.InteractiveVideo);

It's probably easiest if you start by creating a copy of the existing editor library. Then you add the editor dependency to library.json, modify semantics.json and change the "widget": "interactiveVideo" property to e.g. dummyVideo. Then you must change the widget definition in the .js file in the editor library you copied, e.g. H5PEditor.widgets.interactiveVideo into H5PEditor.widgets.dummyVideo.

You can look at simpler editor widget to find out which functions must be implemented in your editor widget.

That is strange. In your console you should be able to see if the CSS file is loaded by inspecting the H5PIntegration.loadedCss array.

When you're getting the YT.Player error it means that it's trying to insert the YouTube video before the YouTube API is loaded. When looking at youtube.js that shouldn't be possible, so I'm not sure why you're getting this…