JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<div class="form-group last">
   <label class="control-label col-md-3">How to video</label>
   <div class="col-md-9">
      <div class="fileinput fileinput-new" data-provides="fileinput">
         <video id="video" width="150" height="100" controls>
            <source id='currentVID' src="" type="video/mp4">
         </video>
         <div class="fileinput-preview fileinput-exists" style="max-width: 200px; max-height: 150px;"> </div>
         <div>
            <span class="btn default btn-file">
            <span class="fileinput-new"> Select Video </span>
            <span class="fileinput-exists"> Change </span>
            <input type="file" id="howtovideo" name="howtovideo" accept="video/mp4" autoplay  onchange="playlocalVID();"/> </span>
            <a href="javascript:;" class="btn red fileinput-exists removepic" data-name="removeforhowtovideo" data-dismiss="fileinput"> Remove </a>
         </div>
      </div>
   </div>
</div>

JavaScript

function playlocalVID()
{
        var player = document.getElementById("video");
        var currentVID = document.getElementById('currentVID');
        var selectedLocalVID = document.getElementById('howtovideo').files[0];
        currentVID.setAttribute('src', URL.createObjectURL(new Blob([selectedLocalVID])));
        player.load();
        player.play();
}