JSFiddle - React, Tailwind, and code Playground

by J R

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="seanmccambridge.com/tubular/js/jquery.tubular.1.0.js"></script>
<script src="seanmccambridge.com/tubular/js/index.js"></script>
<div id="wrapper" class="clearfix">
    <div id="logocontainer">
        <div id="logo">
            <img src="http://www.seanmccambridge.com/tubular/media/logo.png"/>
        </div>
        
        <div class="ontop">This is your TEXT On Top</div>
    </div>
</div> <!--wrapper-->

CSS

* {
    margin: 0;
    padding: 0;
}
#logocontainer{
    position: absolute;
    top: 50;
    left: 50;
    width: 100%;
    text-align:center;
}
#logo {
    margin-left: 0;
    margin-right: 0;
    height: 175px;
    width:400px;
}
.ontop {
    color:#fff;
    font-size:2em;
    background-color: rgba(90,90,190,0.4);
    width:400px;
    padding-top:150px;
    padding-bottom:150px;
}

JavaScript

/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* version: 1.0
|* updated: October 1, 2012
|* since 2010
|* licensed under the MIT License
|* Enjoy.
|* 
|* Thanks,
|* Sean */

;(function ($, window) {

    // test for feature support and return if failure

    // kill for mobile devices
    var deviceWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    
    // defaults
    var defaults = {
        ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
        videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no?
        mute: true,
        repeat: true,
        width: $(window).width(),
        wrapperZIndex: 99,
        playButtonClass: 'tubular-play',
        pauseButtonClass: 'tubular-pause',
        muteButtonClass: 'tubular-mute',
        volumeUpClass: 'tubular-volume-up',
        volumeDownClass: 'tubular-volume-down',
        increaseVolumeBy: 10,
        start: 0,
        minimumSupportedWidth: 600
    };

    // methods

    var tubular = function(node, options) { // should be called on the wrapper div
        var options = $.extend({}, defaults, options),
            $body = $('body') // cache body node
            $node = $(node); // cache wrapper node

        // build container
        var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>';

        // set up css prereq's, inject tubular container and set up wrapper defaults
        $('html,body').css({'width': '100%', 'height': '100%'});
        $body.prepend(tubularContainer);
        $node.css({position: 'relative', 'z-index': options.wrapperZIndex});

        // set up iframe player, use global scope so YT api can talk
        window.player;
       ...