SPIKE: Embedding H5P (iframes) activities in the annotation pane

I'd like to figure out the best way to allow embedding of H5P activities with the hypothes.is annotation pane. H5P are interactive HTML5 activities that can be embedded anywhere on the web through iFrames--there are now more than 30 [available activity types](https://h5p.org/content-types-and-applications). Currently, H5P activities can be published using a CMS (most often this is done with WordPress, Drupal, or Moodle), and published activities include a button which allow users to grab embed code which allows them to embed the activity wherever they like. H5P is open source software, and a group of [5 developers](https://github.com/orgs/h5p/people) based in Tromsø, Norway actively maintain several GitHub repos here: https://github.com/h5p.

Here's an example of what one of the quiz (question set) H5P activities looks like when embedded in a website:

(to see this activity in the wild, visit https://h5p.org/question-set)

When a user clicks the embed button on an activity, they're given the embed code for a full iframe, which can be embedded directly onto a website of their choice.

The embed code also includes a reference to a resizer javascript file which allows the activity be dynamically resized as a user proceeds through the content. This script lives at https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js

The publication of H5P activities follows predictable patterns for both WordPress and Drupal. Within WordPress, each activity will be published at `https://genericname.com/wp-admin/admin-ajax.php?action=h5p_embed&id=###` [with the # being replaced by the activity's unique id number]
In Drupal, the pattern is simpler, but similarly predictable: `https:/genericname.com/h5p/embed/###`

I've made an initial pass at adding iFrame embed support for these H5P activities, (see https://github.com/hypothesis/client/compare/master...SteelWagstaff:h5p-embed#diff-ebb182b364263ee6696a8b842060cc66), but as I see it, I still have a couple of problems:
1. When an H5P user clicks the embed code, they're given a full iFrame. In order for this embed routine to work properly, they need to extract just the src from the iFrame and paste into hypothes.is. hypothes.is then reconstructs the iFrame, which is a little roundabout and tedious for the user. One way to solve this would be to add a 'source' button to the H5P activity GUI, so that users could see and copy just the src instead of the full iFrame. Another way would be for hypothes.is to allow the iframe to be pasted and created rather than the src link (is this possible?)
2. The javascript source file I'm appending now gets blocked because it's being hosted elsewhere (on the h5p site). The error message I get is "Refused to load the script 'https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". I think there's a good workaround for this, but I'm not sure what best practices are for this.

Ideally, users would be able to simply grab the iFrame embed code from an H5P activity and paste into hypothes.is and have their H5P activity appear in the pane, complete with dynamic resizing. I know this might not be as simple as it sounds, but that's the optimal desired behavior.

For use, the most interesting use case would be in supporting educational activities, particularly supporting close reading. Here’s one example of a context in which we'd love to make use of H5P in the annotation pane: https://wisc.pb.unizin.org/objectivists/chapter/lorine-niedeckers-blackhawk-held/

If we could put quizzing or other interactive elements into the annotation pane on a text like this, we’d be able to do some really interesting responsive learning stuff, and have embedded quizzing/discussion in an open environment.