title: Javascript - how to fix the video screen to be stretched width and height without making cutting of picture by height
body: <p>This is not correct, i am trying to set a video screen completely to 100% width and 100% height. But then on a larger resolution it does not display properly the height (get out from the view).</p>
  
  <blockquote>
    <p>The following aspect ration is working but the problem is it makes wrong (black on left and right):</p>
  </blockquote>
  
  <p><img src="https://i.stack.imgur.com/PY54O.png" alt="enter image description here"></p>
  
  <pre><code>window.onresize = function(){
    var aspectRatio;
    if (remoteVideo.style.opacity === '1') {
      aspectRatio = remoteVideo.videoWidth/remoteVideo.videoHeight;
    } else if (localVideo.style.opacity === '1') {
      aspectRatio = localVideo.videoWidth/localVideo.videoHeight;
    } else {
      return;
    }
  
    var innerHeight = this.innerHeight;
    var innerWidth = this.innerWidth;
    var videoWidth = innerWidth &lt; aspectRatio * window.innerHeight ?
                     innerWidth : aspectRatio * window.innerHeight;
    var videoHeight = innerHeight &lt; window.innerWidth / aspectRatio ?
                      innerHeight : window.innerWidth / aspectRatio;
    containerDiv = document.getElementById('container');
    containerDiv.style.width = videoWidth + 'px';
    containerDiv.style.height = videoHeight + 'px';
    containerDiv.style.left = (innerWidth - videoWidth) / 2 + 'px';
    containerDiv.style.top = (innerHeight - videoHeight) / 2 + 'px';
  };
  </code></pre>
  
  <blockquote>
    <p>Tried to modify this but still when the width increase then the height get cut off also while using <code>webkitRequestFullScreen();</code> the whole width and height is broken, its not doing accurate.</p>
  </blockquote>
  
  <pre><code>window.onresize = function(){
    var aspectRatio;
    if (remoteVideo.style.opacity === '1') {
      aspectRatio = remoteVideo.videoWidth/remoteVideo.videoHeight;
    } else if (localVideo.style.opacity === '1') {
      aspectRatio = localVideo.videoWidth/localVideo.videoHeight;
    } else {
      return;
    }
  
    var innerHeight = this.innerHeight;
    var innerWidth = this.innerWidth;
    var videoWidth = innerWidth &lt; aspectRatio * window.innerHeight ?
                     innerWidth : aspectRatio * window.innerHeight;
    var videoHeight = innerHeight &lt; window.innerWidth / aspectRatio ?
                      innerHeight : window.innerWidth / aspectRatio;
    containerDiv = document.getElementById('container');
    //containerDiv.style.width = videoWidth + 'px';
    containerDiv.style.width = window.innerWidth + 'px';
    containerDiv.style.height = videoHeight + 'px';
    //containerDiv.style.left = (innerWidth - videoWidth) / 2 + 'px';
    //containerDiv.style.top = (innerHeight - videoHeight) / 2 + 'px';
  };
  </code></pre>
  
  <p><strong><em>Expected output is (on resize or maximize or full-screen):</em></strong> </p>
  
  <p><img src="https://i.stack.imgur.com/Tfp1G.png" alt="enter image description here"></p>
  
  <p>Can anyone please suggest, i am completely lost, not able to make accurate expected output.</p>
  
  <p><strong>EDIT:</strong> <a href="http://jsfiddle.net/2m8ay/" rel="nofollow noreferrer">http://jsfiddle.net/2m8ay/</a></p>