JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dfcb.github.io/BigVideo.js/css/bigvideo.css">
<script src="http://dfcb.github.io/BigVideo.js/js/jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
<script src="http://dfcb.github.io/BigVideo.js/js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="http://dfcb.github.io/BigVideo.js/js/bigvideo.js"></script>
<div class="main">
    <div id="overview" class="box">
         <h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>

         <h2>Ambient Video Example</h2>

        <p>In this example, we are showing a fullscreen background image instead of video for touchscreen devices. Another trick you can do is to use the forceAutoplay setting, which will start playing a video as soon as a user clicks anywhere on the page (videos will only play on touchscreen devices attached to a user click event)</p>
    </div>
</div>

CSS

.main {
    position:relative;
    margin:50px 50px 440px 220px;
    min-width:300px;
    -webkit-transition-duration:0.6s;
    -moz-transition-duration:0.6s;
    -ms-transition-duration:0.6s;
    -o-transition-duration:0.6s;
    transition-duration:0.6s;
}
.box {
    background:#444;
    background:rgba(0, 0, 0, .6);
    padding:20px;
    border-radius:5px;
    margin-bottom:20px;
    color:#fff
}

JavaScript

BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4', {
    ambient: true
});