JSFiddle - React, Tailwind, and code Playground

HTML

<video id='video'
          controls preload='none' 
          poster="http://media.w3.org/2010/05/sintel/poster.png">
          <source id='mp4'
            src="http://media.w3.org/2010/05/sintel/trailer.mp4"
            type='video/mp4'>
          <source id='webm'
            src="http://media.w3.org/2010/05/sintel/trailer.webm"
            type='video/webm'>
          <source id='ogv'
            src="http://media.w3.org/2010/05/sintel/trailer.ogv"
            type='video/ogg'>
          <p>Your user agent does not support the HTML5 Video element.</p>

          <button>Load the video</button>
        </video>

        <br /><button id="button">Load the video</button>

JavaScript

var video = document.getElementById('video');
            video.load(); // In desktop browser this will cause loadedmetadata event to fire

            // Hide the video initially
            video.style.visibility = 'hidden';

            document.getElementById('button').addEventListener('click', function() {
                video.load(); // on iOS we need user interaction to prompt load
            });

            video.addEventListener('loadedmetadata', function() {
                
                // console log is much less intrusive than window.alert
                // you can see the log statements in Safari developer tools if you plug in a device
                window.alert(this.videoWidth);
                window.alert(this.videoHeight);

                // Now we can set container size, reveal and play
                video.width = this.videoWidth;
                video.height = this.videoHeight;

                video.play();
                video.style.visibility = 'visible';
            });