<!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>