toolkit/components/pictureinpicture/tests/test-transparent-nested-iframes.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Picture-in-Picture test - transparent iframe</title>
</head>

<style>
  video {
    display: block;
  }

  .root {
    position: relative;
    display: inline-block;
  }

  .controls {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: white;
  }

  .container,
  iframe {
    width: 100%;
    height: 100%;
  }

  iframe {
    border: 0;
  }
</style>

<body>
  <div class="root">
    <div class="controls">
      <div class="container">
        <iframe src="about:blank"></iframe>
      </div>
    </div>

    <div class="video-container">
      <video id="video-transparent-background" src="test-video.mp4" loop="true"></video>
    </div>
  </div>
</body>
</html>