Embedding the player page

For a site that cannot host even one file. The player runs on its own origin, so a hostile archive reaches the player’s data and not the embedding site’s, and storage is partitioned per embedding site. The embedding page hears what it asks for: the frame’s height always, and the xAPI statements when the address names the page’s own origin.

Markup

<iframe src="https://player.example/embed?src=https://host.example/course.h5p&xapi=https://your-site.example"
        allow="fullscreen" style="width: 100%; border: 0"></iframe>

<!-- Sizing: the page speaks H5P's resizer protocol upward, so the script
     h5p.org's own embed code includes resizes this frame as it is… -->
<script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js"></script>

<!-- …or answer it yourself, and hear the statements: -->
<script>
  const frame = document.querySelector('iframe')
  addEventListener('message', ({ source, origin, data }) => {
    if (source !== frame.contentWindow || origin !== 'https://player.example') return
    if (data.context === 'h5p' && data.action === 'hello') source.postMessage({ context: 'h5p', action: 'hello' }, origin)
    if (data.context === 'h5p' && data.action === 'resize') frame.style.height = data.scrollHeight + 'px'
    if (data.context === 'h5p-offline-player' && data.action === 'xapi') console.log(data.verb, data.statement)
  })
</script>

What this page received

Safari does not give a cross-origin iframe a Service Worker, and the player cannot run without one. There the embedded page shows a link that opens the player on its own.