JSFiddle - React, Tailwind, and code Playground

by Travis

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fitvids/1.0.3/jquery.fitvids.min.js"></script>
<div id="header">
    <div id="header-content">
        <div id="logo">
            <a href="http://stillwithbusey.com">
                <img src="http://stillwithbusey.com/assets/dist/img/logo.svg">
            </a>
        </div>
        <ul id="menu">
            <li>
                <a href="http://stillwithbusey.com/" class="current">Home</a>
            </li>
            <li>
                <a href="http://stillwithbusey.com/episodes">Episodes</a>
            </li>
            <li>
                <a href="http://stillwithbusey.com/about">About</a>
            </li>
            <li>
                <a href="http://stillwithbusey.com/contact">Contact</a>
            </li>
        </ul>
   </div>
</div>
    
<div id="video" class="videoWrapper">
    <iframe width="420" height="315" src="//www.youtube.com/embed/7qV1p8CHgWM" frameborder="0" allowfullscreen></iframe>
</div>

CSS

body {font:300 16px Sans-Serif; margin:0; padding:0; background:#333;}

/* Header */
#header {background:url(http://stillwithbusey.com/workspace/assets/img/broken-noise.png); overflow:hidden}
#header-content {width:90%; margin:0 auto; position:relative;}
#logo {}
#menu {list-style:none; margin:0; padding:0; line-height:80px;}
#menu li {padding:10px; float:left;}
#menu li a {color:#f9db3a; text-decoration:none; text-transform:uppercase;}
#menu li a:hover {border-bottom:2px solid #f9db3a;}
#menu li a:active {}
.current {border-bottom:2px solid #f9db3a;}

#video {position:relative; x-index:-1;}

@media screen and (min-width:600px) {
    #header {height:100px; overflow:visible;}
    #logo {position:absolute; top:10px; float:left;}
    #menu {float:right;}
}

JavaScript

$(document).ready(function(){
    $("#video").fitVids();
});