JSFiddle - React, Tailwind, and code Playground

HTML

<video id="video" controls="true">
  <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 1
var vid1 = document.getElementById("video");
vid1.videoHeight; // returns the intrinsic height of the video
vid1.videoWidth; // returns the intrinsic width of the video

document.getElementById('output1').innerHTML = "Test 1: " + vid1.videoWidth;


// TEST 2
var vid2 = document.getElementById("video");
vid2.addEventListener( "loadedmetadata", function (e) {
    var width = this.videoWidth,
        height = this.videoHeight;
}, false );

document.getElementById('output2').innerHTML = "Test 2: " + vid2.width;


// TEST 3
var vid3 = document.getElementById("video");
var videotag_width = vid3.offsetWidth;
var videotag_height = vid3.offsetHeight;

document.getElementById('output3').innerHTML = "Test 3: " + videotag_width;