JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvases" class="canvas-container">
        <div id='main' style='display:block'>
            <video id="video" playsinline style=" -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            display: none;
            ">
            </video>
            <canvas id="output" class="camera-canvas"></canvas>
            <canvas id="keypoints" class="camera-canvas"></canvas>
            
            <video id="video2" playsinline controls muted style="z-index: 1; position: absolute;" 
            >
            <source id="source2" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4"  > 
<!-- hard-coding the src in source is the ONLY way I can play a video here at all...  --> 

            </video>
            
            <canvas id="output2" class="camera-canvas2"></canvas>
            <canvas id="keypoints2" class="camera-canvas2"></canvas>

        <canvas class="illustration-canvas"></cavnas>
        <canvas class="illustration-canvas2"></cavnas>

    </div>

JavaScript

async function setupVideo2() {
  console.log('aa')
  
  const video2 = document.getElementById('video2');
  
  video2.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
  console.log(video2.src)
  //video2.setAttribute("src", vid_url_1); //does not work 

  
  videoWidth2orig = video2.videoWidth;
  videoHeight2orig = video2.videoHeight; // gives the actual e.g. 640 x 360
  //.. I do some stuff below to set video2 width/height, works fine
  video2.play();
  return video2;
  
}
setTimeout(()=>{
	//await setupVideo2(); // this will not work
  setupVideo2(); // this works
},3000);