<div class="container">
  <h1>Full screen demo</h1>
  <video id="shuttle" controls>
    <source src="https://youtu.be/OnoNITE-CLc">
  </video>
</div>
body {
  display: flex;
  justify-content: center;
}

.container {
  width: 400px;
  background: linear-gradient(white 20%, #eee);    
  box-shadow: 0 0 10px #ccc inset;
  border-radius: 10px;    
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-left: 1em;
  
  #shuttle:fullscreen {
    width: 100%;
    height: 100%;
  }
}

View Compiled
const vid = document.getElementById('shuttle');

function toggleFullScreen() {
  if (!document.fullscreenElement && vid.requestFullscreen) {
    vid.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen(); 
    }
  }
}

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.