html5 fuldskærm video player

Hej alle sammen lige nu er jeg igang med en html5 video player hvor jeg selv designer den, men problemet lige nu er at den ikke virker i fuld skærm.

Den er lavet i js og html5

html kode

 <video id="my_video" width="550" height="310" >
         <source src="video.mp4">
       </video>
       <div id="video_controls_bar" style="margin:0 auto;margin-top:-28px;">
         <center><button id="playpausebtn"></button>
         <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
         <span id="curtimetext">00:00</span><span id="others"> / </span><span id="durtimetext">00:00</span>
         <button id="mutebtn"></button>
         <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
         <button id="fullscreenbtn" style="background:none;color:#fff;">full screen</button></center>
       </div>

js kode

 var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
 function intializePlayer(){
     // Set object references
     vid = document.getElementById("my_video");
     playbtn = document.getElementById("playpausebtn");
     seekslider = document.getElementById("seekslider");
     curtimetext = document.getElementById("curtimetext");
     durtimetext = document.getElementById("durtimetext");
     mutebtn = document.getElementById("mutebtn");
     volumeslider = document.getElementById("volumeslider");
     fullscreenbtn = document.getElementById("fullscreenbtn");
     // Add event listeners
     playbtn.addEventListener("click",playPause,false);
     seekslider.addEventListener("change",vidSeek,false);
     vid.addEventListener("timeupdate",seektimeupdate,false);
     mutebtn.addEventListener("click",vidmute,false);
     volumeslider.addEventListener("change",setvolume,false);
     fullscreenbtn.addEventListener("click",toggleFullScreen,false);
 }
 window.onload = intializePlayer;
 function playPause(){
     if(vid.paused){
         vid.play();
         } else {
         vid.pause();
     }
 }
 function vidSeek(){
     var seekto = vid.duration * (seekslider.value / 100);
     vid.currentTime = seekto;
 }
 function seektimeupdate(){
     var nt = vid.currentTime * (100 / vid.duration);
     seekslider.value = nt;
     var curmins = Math.floor(vid.currentTime / 60);
     var cursecs = Math.floor(vid.currentTime - curmins * 60);
     var durmins = Math.floor(vid.duration / 60);
     var dursecs = Math.floor(vid.duration - durmins * 60);
     if(cursecs < 10){ cursecs = "0"+cursecs; }
     if(dursecs < 10){ dursecs = "0"+dursecs; }
     if(curmins < 10){ curmins = "0"+curmins; }
     if(durmins < 10){ durmins = "0"+durmins; }
     curtimetext.innerHTML = curmins+":"+cursecs;
     durtimetext.innerHTML = durmins+":"+dursecs;
     document.getElementById("seekslider").style.width="200px";
 }
 function vidmute(){
     if(vid.muted){
         vid.muted = false;
         vidmute.style.background = "url(mute.png)";
     } else {
         vid.muted = true;
         vidmute.style.background = "url(unmute.png)";
     }
 }
 function setvolume(){
     vid.volume = volumeslider.value / 100;
 }
 function toggleFullScreen(){
     if(vid.requestFullScreen){
         vid.requestFullScreen();
     } else if(vid.webkitRequestFullScreen){
         vid.webkitRequestFullScreen();
     } else if(vid.mozRequestFullScreen){
         vid.mozRequestFullScreen();
     }
 }