Reworked

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107
/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<style>
#overlay {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	background-color: #000000;
	color: #ffffff;
}

#overlay > div {
	text-align: center;
}

#overlay > div > button {
	height: 20px;
	background: transparent;
	color: #ffffff;
	outline: 1px solid #ffffff;
	border: 0px;
	cursor: pointer;
}

#overlay > div > p {
	color: #777777;
	font-size: 12px;
}
</style>
<div id="overlay">
  <div>
    <button id="startButton">Click to Play</button>
    <p>Video playback with audio requires user interaction.</p>
  </div>
</div>
<video id="video" autoplay loop crossOrigin="anonymous" webkit-playsinline style="display:none">
			<source src="https://threejs.org/examples/textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
			<source src="https://threejs.org/examples/textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene, camera, renderer, screen;
var clock = new THREE.Clock();
var time = 0;
var rotation = THREE.Math.degToRad(15);

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
  camera.position.set(2, 1, 2).setLength(15);
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x202020);
  document.body.appendChild(renderer.domElement);
  
  var overlay = document.getElementById( 'overlay' );
	overlay.remove();
  
  var video = document.getElementById( 'video' );
  video.volume = 0;
	video.play();
  var videoTex = new THREE.VideoTexture( video );

  var controls = new THREE.OrbitControls(camera, renderer.domElement);

  var projCamera = new THREE.PerspectiveCamera(35, 1.2, 0.01, 10 );
  projCamera.position.set( 0, 0, 9 );
  projCamera.updateMatrixWorld();

  var helper = new THREE.CameraHelper( projCamera );
  scene.add( helper );

  screen = new THREE.Mesh(new THREE.BoxBufferGeometry(16, 9, 2), 
    new THREE.ShaderMaterial({
      uniforms: {
        baseColor: {value: new THREE.Color(0xcccccc)},
        cameraMatrix: { type: 'm4', value: projCamera.matrixWorldInverse },
        projMatrix: { type: 'm4', value: projCamera.projectionMatrix },
        texture: {value: videoTex }
      },
      vertexShader: `

        varying vec4 vWorldPos;

        void main() {

          vWorldPos = modelMatrix * vec4(position, 1.0);
          gl_Position = projectionMatrix * viewMatrix * vWorldPos;

        }

      `,
      fragmentShader: `

        uniform vec3 baseColor;
        uniform sampler2D texture;
        uniform mat4 cameraMatrix;
        uniform mat4 projMatrix;

        varying vec4 vWorldPos;

        void main() {

          vec4 texc = projMatrix * cameraMatrix * vWorldPos;
          vec2 uv = texc.xy / texc.w / 2.0 + 0.5;

          vec3 color = ( max( uv.x, uv.y ) <= 1. &&...