Question

Firefox now supports full screen mode on the video html5 tag. ( right click on the movie .. )

Is there any way to create a control ( html tag ) to do this like this play/pause example ( using js ) ?

<script>
function play(){
var video = document.getElementById('movie');
var play =  document.getElementById('play');

play.addEventListener('click',playControl,false);
function playControl() {
    if (video.paused == false) {
        video.pause();
    this.firstChild.nodeValue = 'Play';
    pauseCount();
} else {
    video.play();
    this.firstChild.nodeValue = 'Pause';
    startCount();
}
}
}

Answer 1

basically all you need is creating a function (triggered by a fullscreen button) in which you assign a position: absolute, and an higher z-index to the video wrapper

the you will assign both video and video wrapper width and height : 100% (or fixed size if you prefer)

probably the best way to achieve this behaviour is defining a class (e.g. fullscreen) and assign it to the container, something like

.fullscreen {
   position : absolute;
   z-index  : 1000;
   width    : 100%;
   height   : 100%;
   top      : 0;
   left     : 0;
}

.fullscreen video {
   width    : 100%;
   height   : 100%;
}

so the function call (fullscreen/normal view) is a switch for the .fullscreen class.