JSFiddle - React, Tailwind, and code Playground

HTML

<video id="video" controls="true">
  <source id="source" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
</video>

<!-- Video Width Output -->
<div id="output1"></div>
<br />
<div id="output2"></div>
<br />
<div id="output3"></div>

JavaScript

// TEST 2
var vid2 = document.getElementById("video");
vid2.addEventListener("loadedmetadata", getmetadata);

if (vid2.readyState >= 2) {
	getmetadata(vid2);
}

function getmetadata(){
    document.getElementById('output2').innerHTML = "Test 2: " + vid2.videoWidth;
}