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