JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>get frame- to video-size</title>
        <meta name="author" content="cottton at http://i-stats.net" />
        <style type="text/css"> <!--
            #frame1,#frame2,#video1,#video2{
                transition:all 0.7s ease;
                -moz-transition:all 0.7s ease;
                -webkit-transition:all 0.7s ease;
                -o-transition:all 0.7s ease;
            }
            #frame1{
                width:300px;
                height:300px;
                overflow-x:auto;
                overflow-y:auto;
                background:red;
            }
            #frame2{
                width:1000px;
                height:600px;
                overflow-x:auto;
                overflow-y:auto;
                background:orange;
            }
            #video1,#video2{
                opacity:0;
            }
        --></style>
    </head>
    <body>
        <div id="video1Text">video 1 :: frame too small</div>
        <div id="frame1">
            <video id="video1" controls>
                <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
                Your browser does not support HTML5 video.
            </video>
        </div>
        <hr />
        <div id="video2Text">video 2 :: frame too big</div>
        <div id="frame2">
            <video id="video2" controls>
                <source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
                Your browser does not support HTML5 video.
            </video>
        </div>
        <script type="text/javascript"><!--
            var video = {
                0 : {
                    'frame' : document.getElementById('frame1'),
                    'elem' : document.getElementById('video1'),
                    'text' : document.getElementById('video1Text'),
                    'width' : false,
                    'height' : false,
                    'event' :...