JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script>
<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
<div id="footnote"></div>

CSS

.test1 {
  background: green
}

.test2 {
  -webkit-box-shadow: -1px 1px 1px #bdc7c6;
  -moz-box-shadow: -1px 1px 1px #bdc7c6;
  box-shadow:  -1px 1px 1px #bdc7c6;
  border: 1px solid #333;
}

JavaScript

// create popcorn instance
var popcorn = Popcorn( "#video" ),
    flag = true;

// add some footnote events!
popcorn.footnote({
    start: 2,
    end: 6,
    text: "TOGGLING EVENTS",
    target: "footnote",
    effect: "applyclass",
    applyclass: "test1, test2"
});

// play popcorn
popcorn.volume( 0 );
popcorn.play();