JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="//cdn.jsdelivr.net/flexslider/2.0/jquery.flexslider-min.js"></script>
<div class="div-1">
    <div class="slider customContent">
        <ul class="slides">
            <li>
                <div class="image">
                    <iframe id="player_1" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
                </div>

                <div class="post">
                    <div class="content">
                        <span class="meta-title">Another title</span>
                    </div>
                </div>
            </li>
            <li>    
                <div class="image">
                    <iframe id="player_2" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_2" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
                </div>

                <div class="post">
                    <div class="content">
                        <span class="title">A title</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="div-2">
    <div class="slider customContent">
        <ul class="slides">
            <li>
                <div class="image">
                    <iframe id="player_3" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_4" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
                </div>

                <div class="post">
                    <div class="content">
                        <span class="meta-title">Another title</span>
                    </div>
                </div>
            </li>
            <li>    
                <div class="image">
                    <iframe id="player_4"...

CSS

/*
    Flexslider CSS
*/



/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

 
/* Browser Resets */
.flex-container a:active,
.slider a:active,
.flex-container a:focus,
.slider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none; z-index: 10;} 

/* FlexSlider Necessary Styles
*********************************/ 
.slider {margin: 0; padding: 0;}
.slider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.slider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
/*.no-js .slides > li:first-child {display: block;}*/
.slider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;} 



/* FlexSlider Default Theme
*********************************/
.slider {position: relative; zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.slider .slides {zoom: 1;}

/*.carousel li {margin-right: 5px}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s...

JavaScript

var sliders = [];
console.log('$f',$f);
var vimeoPlayers = jQuery('.slider').find('iframe'), player;        

for (var i = 0, length = vimeoPlayers.length; i < length; i++) {            
    var player = $f(vimeoPlayers[i]);
    
    console.log(player);
    player.addEvent('ready', ready);        
}

function ready(player_id) {
    console.log('ready:', player_id);
    var froogaloop = $f(player_id);
    froogaloop.addEvent('play', function(data) {
        console.log("playing",data);
        jQuery('#'+data).closest('.slider').data('flexslider').flexslider("pause");          
    });
    
    froogaloop.addEvent('pause', function(data) {
        console.log("pausing",data);
        jQuery('#'+data).closest('.slider').data('flexslider').flexslider("play");           
    });         
}

var slideOptions = {
    animation: "fade",
    useCSS: true,       
    animationLoop: true,       
    smoothHeight: true,       
    before: function(slider){
        //console.log(slider.slides.eq(slider.currentSlide).find('iframe')[0].id, slider.currentSlide);
        //if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
            //$f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id') ).api('pause');       
    },
};

$('.slider').flexslider(slideOptions);