JSFiddle - React, Tailwind, and code Playground

by rwachtler

HTML

<script src="http://dfcb.github.io/BigVideo.js/bower_components/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="http://vjs.zencdn.net/4.3/video.js"></script>
<script src="http://dfcb.github.io/BigVideo.js/bower_components/BigVideo/lib/bigvideo.js"></script>
<nav id="navigation">
    <ul id="nav-list">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</nav>

CSS

html, body{
    width: 100%;
    height: 100%;
    font-size: 16px;
}
#big-video-wrap{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:-1;
}
nav{
    width: 100%;
}
nav > ul{
    list-style: none;
    float: right;
}
ul#nav-list > li{
    float: left;
    font-size:1.2em;
    margin:0 5px;
}
ul#nav-list > li > a{
    text-decoration: none;
    padding:5px 10px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 4px;
    color: rgba(255,255,255,0.7);
    font-family: 'Helvetica Neue', sans-serif;
}
ul#nav-list > li > a:hover{
    background: rgba(255,255,255,0.7);
    color: rgba(0,0,0,0.8);
}

JavaScript

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('http://vjs.zencdn.net/v/oceans.mp4', {ambient:true});
});