HTML和Javascript：为什么视频不能全屏？

Question

我有一个带有自定义控件和一些javascript的视频来控制它们。继承我的代码：

<div id ="video-container">
              <video class = "jack7" width="409" height="230" id = "video">
                <source src="<?php echo($videourl); ?>" type="video/mp4">  
                Your browser does not support this video. Try chrome!
              </video>
              <div id="video-controls">
                <button type="button" id="play-pause" ><img id = "playbtn" src="img/icons/play.png"></button>
                <input type="range" id="seek-bar" step="0.01" value="0">
                <button type="button" id="mute"><img id = "mutebtn" src="img/icons/unmute.png"></button>
                <input type="range" id="volume-bar" min="0" max="1" step="0.01" value="1">
                <button type="button" id="full-screen"><img id = "fsbtn" src="img/icons/fullscreen.png"></button>
              </div>

          </div>

            <script src="controls.js"></script>

    var video = document.getElementById("video");    
    var fullScreenButton = document.getElementById("full-screen");

  fullScreenButton.addEventListener("click", function() {
              if (video.requestFullscreen) {
                video.requestFullscreen();
                document.getElementById("video-container").requestFullscreen();
              } else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen(); // Firefox
              } else if (video.webkitRequestFullscreen) {
                //video.webkitRequestFullscreen();
                document.getElementById("video-container").webkitRequestFullscreen();
              }
            });

当我点击全屏按钮时，整个屏幕变黑，除了显示非全屏大小视频的小部分以及控件。为什么视频不能全屏显示？