With the evolution of HTML5 APIs taking a video to Fullscreen and back is very easy and indeed no flash!
P.S : I shall be using webm for the demo, the below image and explanations must make things clear on why webm.
Why webm? :
It gives :
Benefits ? :
It supports very high quality video viewing.
THE CODE : [ webkit, v8 and spidermonkey ]
var videoElement = document.getElementById("myvideo");
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
Feel free to check out DEMO and comment below!