JSFiddle - React, Tailwind, and code Playground

by Vikram Anand

HTML

<link rel="stylesheet" href="http://wstation.inmomundo.com/static01/cssii/costarica/responsiveslides.css">
<script src="http://wstation.inmomundo.com/static01/scripts/responsiveslides.min.js"></script>
<ul class="rslides transparent-btns transparent-btns1" id="slider1" style="max-width: 540px;">
    <li class="fluidratio transparent-btns1_on" id="transparent-btns1_s0" style="display: block; transition: opacity 500ms ease-in-out 0s; float: left; position: relative; opacity: 1; z-index: 2;">
        <div class="bg thumbnail">	<a style="visibility:visible"  name="video_yt" class="thumb ui-link" id="video1"><object><param  name="movie"><param value="true" name="allowFullScreen"><param value="never" name="allowscriptaccess"><param value="internal" name="allownetworking"><param value="transparent" name="wmode">
					<embed id="video1" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="never" allownetworking="internal" wmode="transparent" type="application/x-shockwave-flash" src="http://www.youtube.com/v/PLOUfmig96M?version=3&enablejsapi=1&hl=es_ES&rel=0&color1=0x2b405b&color2=0x6b8ab6&fs=1&border=1&autoplay=1"></object></a>

        </div>
    </li>
    <li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
        <div class="bg thumbnail">
            <img class="thumb big" src="http://images01.inmotico.com/314/900/3149002000RC/580X420/b29e437f883ed50a71026a24cceb6f10.JPG" name="primary" id="primary" style="margin-top: -215px;">
        </div>
        <!-------!This div is for the discription in the image----->
        <div class="pie_foto">
            <div class="pagination_img">finca 1 de 14</div>
        </div>
    </li>
    <li class="fluidratio" id="transparent-btns1_s2" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
        <div class="bg...

CSS

.bg {

    background-color: #333 !important;

}

JavaScript

$("#slider1").responsiveSlides({
    startidx: 0,
    auto: false,
    pager: true,
    nav: true,
    speed: 500,
    maxwidth: 540,
    namespace: "transparent-btns"
});

//$('.transparent-btns_nav').trigger('click');
$(document).on('click', '.transparent-btns_nav', function (event) {
video = $('.transparent-btns1_on').find('object').length;
 if($('#video1').parents('li').hasClass('transparent-btns1_on')){ 
               $('object').find('#video1').attr("src", "http://www.youtube.com/v/PLOUfmig96M?version=3&enablejsapi=1&hl=es_ES&rel=0&color1=0x2b405b&color2=0x6b8ab6&fs=1&border=1&autoplay=1");           
        } else {
            $('object').find('#video1').attr("src", "");    
        }



});