<html>
<head>
    <style>
      body { zoom: 150%; }
      video {
        margin: 30px;
        display: block;
      }
      .rotated {
        transform: rotate(10deg);
      }
    </style>
    <script src="media-file.js"></script>
    <script src="video-paint-test.js"></script>
    <script src="media-controls.js"></script>
</head>
<body onload="setVideoSrcAndWaitForFirstFrame('content/test.ogv');">
    <p>Zoomed video with controls.</p>
    <video width="160" height="120" controls></video>
    <video class="rotated" width="160" height="120" controls></video>
</body>
<script>
  const videos = document.getElementsByTagName('video');
  for (var i = 0; i < videos.length; ++i) {
    enableTestMode(videos[i]);
  }
</script>
</html>