<!doctype html>
<html>
<head>
  <style type="text/css">
    /* Make the video stretch to fill the screen. */
    :-webkit-full-screen #fullscreenvideo {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <!--This video was obtained from
      https://videos.pexels.com/videos/adventure-trip-481. It is licensed under
      Creative Commons Zero, which does not require attribution.-->
  <video controls src="road_trip_640_480.mp4" width="640"
      height="480" id="fullscreenvideo" autoplay="autoplay">
</body>
<script>
  var videoElement = document.getElementById("fullscreenvideo");

  function toggleFullScreen() {
    if (!document.webkitFullScreen) {
      videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    } else {
      document.webkitCancelFullScreen();
    }
  }

  // Pressing "Return" causes the video to enter fullscreen.
  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);
</script>
</html>