JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.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>

JavaScript

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

//  compose to log data at start and end
Popcorn.compose( "addClass", {
    
    // start function that will add the passed in css class
    start: function( event, options ) {
        document.getElementById( options.target ).firstChild.className = options.class;
    },
    
    // end function that will set the className to nothing
    end: function( event, options ) {
        document.getElementById( options.target ).firstChild.className = "";
    }
});

// add some footnote events!
popcorn.footnote({
    start: 3,
    end: 6,
    text: "TOGGLING EVENTS",
    target: "footnote",
    compose: "addClass",
    class: "asd"
});

// play popcorn
popcorn.play();