intermediate-frame.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

  <title>Intermediate frame embedding a nested media element iframe</title>

</head>

<body>

<script>

// Bidirectionally forwards postMessage traffic between the test page (parent)

// and the leaf media element iframe (child), so the test page can drive the

// media element as if it were a direct child while remaining separated from it

// by this intermediate frame. The `media` query parameter is forwarded to the

// nested frame so it hosts the requested media element type.

const params = new URLSearchParams(location.search);

const media = params.get('media') === 'audio' ? 'audio' : 'video';

const nestedIframe = document.createElement('iframe');

nestedIframe.id = 'nested-iframe';

nestedIframe.allow = 'media-playback-while-not-visible \'none\'; autoplay *';

nestedIframe.src = 'media-frame.html?media=' + media;

document.body.appendChild(nestedIframe);

window.addEventListener('message', function(event) {

  if (event.source === nestedIframe.contentWindow) {

    // Messages from the nested iframe (leaf) - forward to parent.

    window.parent.postMessage(event.data, '*');

  } else if (event.source === window.parent) {

    // Messages from the parent - forward to the nested iframe (leaf).

    nestedIframe.contentWindow.postMessage(event.data, '*');

});

</script>

</body>

</html>