JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//www.youtube.com/iframe_api"></script>
<div class="row">
    <div class="span10">
        <section class="slider">
            <div id="slider" class="flexslider">
                <ul class="slides">
                    <li>
                        <iframe id="dang" src="//www.youtube.com/embed/iLqTS8vn8Eo?autohide=0&amp;enablejsapi=1&amp;playerapiid=640283&amp;modestbranding=1&amp;rel=0&amp;origin=http://wcms-test-cdc.cdc.gov&amp;wmode=opaque" width="560" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                        <p class="flex-caption">
                            <span>More on this video</span> <a href="#">More &gt;</a>
			        	</p>                        
                    </li>
                    <li>
                        <img class="lazy" data-src="//flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
                        <p class="flex-caption">
							<span>Vestibulum fermentum placerat nibh sed bibendum. Mauris sit amet facilisis magna.</span>
			        	</p>
                    </li>
                    <li>
                        <iframe name="videoFrame" src="//player.vimeo.com/video/9519939" width="560" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </li>
                    <li>
                        <img class="lazy" data-src="//flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
 ...

CSS

.flex-direction-nav a {
    outline:1px solid red;
}
.flexslider .slides > li {
    position: relative;
    margin-right:5px;
}
.flexslider {
    margin-bottom:0;
}

.flex-caption {
    width: 96%;
    padding: 2%;
    position: absolute;
    left: 0;
    bottom: -10px;
    background: rgba(0,0,0,.8);
    color: #fff;
    font-size: 14px;
    line-height: 18px;
}
ol.flex-control-paging {
    bottom: -190px;
}
.flex-control-paging li a {
    width:16px;
    height:16px;
}
.lazy {
    display:none;
}
.playbtnBig {
    position: relative;
    left: 40%;
    top: -320px;
    width: 130px!important;
}
.playbtnSmall {
    position: absolute;
    left: 38%;
    top: 33%;
    opacity: 0.75;
    width: 50px!important;
}

JavaScript

var sliderObj;
$(function () {
    $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider',
        start: function (slider) {
            $("#carousel img.lazy").lazyload();
            loadCarouselImg(slider);
            sliderObj = slider;
        },
        after: function (slider) {
            //loadSliderImg(slider);
        }
    });
    $("#slider")
        .flexslider({
        animation: "slide",
        useCSS: false,
        animationLoop: false,
        slideshow: false,
        //smoothHeight: true,    // happens before "after", so doesn't work with lazyload
        start: function (slider) {
            $("#slider img.lazy").lazyload();
            loadSliderImg(slider);
            sliderObj = slider;
        },
        after: function (slider) {
            loadSliderImg(slider);
        }
    });

    // when the image loads, 
    $('.flexslider img.lazy').load(function () {
        console.log($(this).attr('src') + ' loaded');
        cleanup(sliderObj);
    });

    $('#carousel .slides li img[src*="youtube.com"]').after('<img class="playbtnSmall" src="//cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png" />');
    $('#carousel .slides li img[src*="ytimg.com"]').after('<img class="playbtnSmall" src="//cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png" />');  
    
    $('#carousel .slides li img[src*="vimeocdn.com"]').after('<img class="playbtnSmall" src="//cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png" />');
    //  //cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png
    //  //www.citr.ca/citrPlayer/play-i.png

    $('#slider').fitVids();
});

function loadCarouselImg(slider) {

}

// load the slider image based on the current slide and the data-src of the lazyload image
function loadSliderImg(slider) {
    var slides = slider.slides,
       ...