title: Chrome mobile camera 100% screen size?
body: <p>I'm using the following code to access the camera and display the stream.  For some reason it is 100% width but only probably 70% height. What is the best way to make it fill the screen?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;video autoplay class="screen"&gt;&lt;/video&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>video {
      height: 100%;
      width: 100%;
      border: 1px solid blue; //so I can see the size of the element
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var video = document.querySelector('video');
  
  function startStream() {
      // Get access to the camera!
      if(navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
          // Not adding `{ audio: true }` since we only want video now
          navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }  }).then(function(stream) {
              video.src = window.URL.createObjectURL(stream);
              /*video.play();*/
          });
      }
  }
  
  startStream();
  </code></pre>
  
  <p>This ends up looking like this:</p>
  
  <p><a href="https://i.stack.imgur.com/wCxXr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wCxXr.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>I changed the <code>.video</code> CSS to the following:</p>
  
  <pre><code>video {
      height: 100%;
      overflow: hidden;
      max-width: 100%;
  }
  </code></pre>
  
  <p>This makes it fill the screen, however, now the container is wider than the screen which is causing some overflow issues.</p>