JSFiddle - React, Tailwind, and code Playground

by Imperative

HTML

<script src="http://imperativeideas.com/fiddle/bigvideo.js"></script>
<script src="http://imperativeideas.com/fiddle/jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script src="http://imperativeideas.com/fiddle/modernizr.js"></script>
<div class="main">
    <div id="overview" class="box">
         <h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>

         <h2>Random Ambient Loop Example</h2>

    </div>
</div>

CSS

* {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    *behavior:url(boxsizing.htc);
}
html, body {
    margin:0;
    padding:0;
    background:#000;
    line-height:1;
    font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
}
h1, h2, .nav-link, .playlist-btn {
    font-family:'Source Sans Pro', sans-serif;
    font-weight:900;
    text-transform:uppercase;
}
h1 {
    font-size:48px;
}
h1, h2, h3, p {
    margin:0 0 10px;
    color:#fff;
    text-shadow: 1px 1px 1px #000;
}
p {
    line-height:1.4;
}
a {
    color:#fff;
    font-style:italic;
}
blockquote {
    background:#fff;
    margin:0 0 20px;
    padding:5px 20px;
}
pre {
    white-space:pre-wrap;
    /* css-3 */
    white-space:-moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space:-pre-wrap;
    /* Opera 4-6 */
    white-space:-o-pre-wrap;
    /* Opera 7 */
    word-wrap:break-word;
    /* Internet Explorer 5.5+ */
}
.box {
    background:#444;
    background:rgba(0, 0, 0, .6);
    padding:20px;
    border-radius:5px;
    margin-bottom:20px;
}
.nav {
    position:fixed;
    top:50px;
    left:50px;
    width:150px;
    -webkit-transition-duration:0.6s;
    -moz-transition-duration:0.6s;
    -ms-transition-duration:0.6s;
    -o-transition-duration:0.6s;
    transition-duration:0.6s;
}
.credit {
    margin:20px 0;
}
.download-links {
    margin-top:20px;
}
.download {
    margin-left:10px;
    padding:5px 10px;
    color:#fff;
    background:#111;
    border-radius:5px;
}
.video-list {
    list-style:none;
    margin:0 0 -10px;
    padding:0;
    text-align:center;
}
.video-list li {
    margin-bottom:10px;
}
.video-list .playlist-btn {
    display:block;
    width:100%;
}
.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;
}
.nav-link {
   ...

JavaScript

var BV = new $.BigVideo();
BV.init();
if(jQuery.support.touch){
    BV.show('http://clients.imperativeideas.com/cu/images/testback-1.jpg');
} else {
    BV.show('http://imperativeideas.com/fiddle/video/roman-skyline-timelapse-zc.mp4', {
        ambient: true
    });
}