Controlling background video visibility using THRE

Question

i have this example that stackoverflow user Marquizzo helped me develop. What it'd like to change is that instead of background color changing based on camera position I would like to have a short looped video background that becomes visible only in the position that right now in the example makes the background go gradually black.

Additional features would be audio volume increasing in the same way and also activiating an invisible hotspot (also only in the same range of camera position) to click/tap that redirects to another page.

Below is the code that affects the background color right now:

var vantagePoint = new THREE.Vector3(6.8, 0.6, -1.8);
var distance = 100;
var normalized = 1;
var endColor = new THREE.Color(0xffffff);
var startColor = new THREE.Color(0x000000);
scene.background = startColor;



function animate() {
		
		distance = vantagePoint.distanceTo(camera.position);
   normalized = THREE.Math.smoothstep(distance, 0.3, 2); // Converts [1, 100] => [0, 1]

   // Resets the color on each frame
   startColor.set(0xf000000);
   startColor.lerp(endColor, normalized);

	render();
	requestAnimationFrame( animate );

	


	}