JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://static.e-talemedia.net/scripts/jquery-1.8.3.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<body>
    <div class="page">
        <div id="main">
            
    <div class="divbuyonlineVid">
       
        
        <img class="emsbinstartbutton" id="emsbinstartbutton" src="http://static.e-talemedia.net/content/images/youtubebuyonline1.png"
            alt="" />
        <div class="divVidContainer">
            <object width="640" height="385">
                
                <param name="movie" value="http://www.youtube.com/v/fBZTbCrM2eQ&amp;hl=en_US&amp;fs=1&wmode=opaque ">
                </param>
                <param name="allowFullScreen" value="true"></param>
                <param name="allowscriptaccess" value="always"></param>
                <embed src="http://www.youtube.com/v/fBZTbCrM2eQ&amp;hl=en_US&amp;fs=1&wmode=opaque"
                    type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
                    width="640" height="385" wmode="Opaque"></embed>
            </object>
           
        </div>
    </div>
    <div id="threebytwo" class="threebytwo">
        <div class="threebytwomiddle">
            <img class="closebtn" id="closebtn" src="http://static.e-talemedia.net/content/images/youtubeexitcross1.png" />
           
        </div>
    </div>
    <input id="e-taleWidgetImpressionId" name="e-taleWidgetImpressionId" type="hidden" value="" />

CSS

* {
        padding: 0px;
        margin: 0px;
    }

     body
     {
        padding: 0px;
        margin: 0px;
        width: 642px;
        height: 400px;
        background: none;
     }
    
    .page
    {
        padding: 0px;
        margin: 0px;
        width: 642px;
        height: 400px;
    }

    #main
    {
    height: 241px;
    margin: 0;
    padding: 0;
    width: 642px;
    } 

.w6392597
{
   height: 85px;
   margin-left: 13px;
    margin-top: 4px;
    width: 90px;
}
            
        .threebytwo
        {
              background-position: left top;
    background-repeat: no-repeat;
    height: 400px;
    margin-top: -346px;
    position: absolute;
    width: 642px;
    z-index: 99999;


        }

.threebytwomiddle {
    background: url("http://static.e-talemedia.net/content/images/doveyoutube.png") no-repeat scroll 0 0 transparent;
    height: 240px;
    margin-left: 113px;
    margin-top: 39px;
    width: 495px;
}

        
        .threebytwo ul
        {
            height: 221px;
    width: 420px;
    list-style: none outside none; 
   
        }

        .threebytwo li
        {
     float: left;
    height: 99px;
    margin: 1px 14px 0;
    width: 109px;
}

        .threebytwo .retailerlogo 
        {    
        }

        .instock {
    margin-top: 7px;
margin-left:3px;
        }

        .outofstock
        {
margin-top: 7px;
margin-left:-4px;
        }
        
        .buynow 
        {
            margin-top: 7px;
            margin-left: -1px;
          
        }

.emsbinstarttext
{
    float: left;
    margin-bottom: 5px;
    margin-left: 41px;
    margin-top: 10px;
}

.emsbinstartbutton
{
    float: left;
    margin-left: 30px;
    margin-top: 5px;
 margin-bottom: 5px;
   
}


.divVidContainer
{
 height: 360px;
  width: 640px;

}

.divbuyonlineVid
{
   background-color: black;
    height: 400px;
    width: 640px;
    z-index: -1;
}
.closebtn
{
      margin-left: 401px;
    margin-top: 0;
   
}

a img { border: 0; }


 ...

JavaScript

$(document).ready(function () {
            var obj = $('object')
     .wrap('<div id="test"></div>')
     .find('embed').attr('src', function (i, s) { return s + '&enablejsapi=1&version=3' }).end()
     .find('param[name=movie]').attr('value', function (i, v) { return v + '&enablejsapi=1&version=3' }).end()
     .detach()
     .appendTo($('#test'));

            $(document).ready(function () {
                $("#emsbinstartbutton").click(function () {
                    //Then assign the src to null, this then stops the video been playing
                    obj.find('embed')[0].pauseVideo();
                    $("body").append($("<div>").css({
                        position: "fixed"
        , width: "640px"
        , height: "425px"
        , "background-color": "#000"
        , opacity: 0.6
        , "z-index": 999
        , top: 0
        , left: 0
                    }).attr("id", "page-cover"));

                    $("#threebytwo").show();
                });
            });
 // when they click on the x the widget should be hidden and the video shows again
         
                $("#closebtn").click(function () {
                    //                     $("#divbuyonlineVid").show();
                    //                     $(".divbuyonlineVid").show();
                    $("#threebytwo").hide();
                    $("#page-cover").detach();
                });
          
           

        });