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">
<iframe id="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" enablejsapi="1" allowfullscreen></iframe>

<div class="row">
    <div class="span10">
        <section class="slider">
            <div id="slider" class="flexslider">
                <ul class="slides">
                    <li>
                        <!-- <iframe id="youtube-video" src="//www.youtube.com/embed/iLqTS8vn8Eo?autohide=0&amp;enablejsapi=1&amp;playerapiid=640283&amp;modestbranding=1&amp;rel=0&amp;wmode=opaque" width="560" height="320" frameborder="0" enablejsapi="1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> -->
                        
                        <!-- <iframe id="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" enablejsapi="1" 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>
                       ...

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 tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady() {
  alert("hey Im ready");
  //do whatever you want here. Like, player.playVideo();

}

function onPlayerStateChange() {
  alert("my state changed");
}