JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<video id="video" controls autoplay>
              <source src="http://videos.mozilla.org/serv/webmademovies/wtfpopcorn.mp4" type="video/mp4">
              <source src="http://videos.mozilla.org/serv/webmademovies/wtfpopcorn.webm" type="video/webM">
              <source src="http://videos.mozilla.org/serv/webmademovies/wtfpopcorn.ogv" type="video/ogg">
</video>
<div id="target"></div>

CSS

#target {
    background: grey;
    padding: 1em;
}
#target div {
    background: red;
    padding: 1em;
}

JavaScript

(function() {
  
  Popcorn("#video").footnoteAnimated({
    start: 2,
    end: 6,
    text: "Pop!",
    target: "target"
  });
    Popcorn("#video").footnoteAnimated({
    start: 7,
    end: 10,
    text: "Pop2",
    target: "target"
  });
  
})((function() {
  (function(global, document) {

    // Popcorn.js does not support archaic browsers
    if ( !document.addEventListener ) {
      global.Popcorn = {
        isSupported: false
      };

      var methods = ( "removeInstance addInstance getInstanceById removeInstanceById " +
            "forEach extend effects error guid sizeOf isArray nop position disable enable destroy" +
            "addTrackEvent removeTrackEvent getTrackEvents getTrackEvent getLastTrackEventId " +
            "timeUpdate plugin removePlugin compose effect parser xhr getJSONP getScript player" ).split(/\s+/);

      while ( methods.length ) {
        global.Popcorn[ methods.shift() ] = function() {};
      }
      return;
    }

    var

    AP = Array.prototype,
    OP = Object.prototype,

    forEach = AP.forEach,
    slice = AP.slice,
    hasOwn = OP.hasOwnProperty,
    toString = OP.toString,

    // Copy global Popcorn (may not exist)
    _Popcorn = global.Popcorn,

    //  ID string matching
    rIdExp  = /^(#([\w\-\_\.]+))$/,

    //  Ready fn cache
    readyStack = [],
    readyBound = false,
    readyFired = false,

    //  Non-public internal data object
    internal = {
      events: {
        hash: {},
        apis: {}
      }
    },

    //  Non-public `requestAnimFrame`
    //  http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    requestAnimFrame = (function(){
      return global.requestAnimationFrame ||
        global.webkitRequestAnimationFrame ||
        global.mozRequestAnimationFrame ||
        global.oRequestAnimationFrame ||
        global.msRequestAnimationFrame ||
        function( callback, element ) {
          global.setTimeout( callback, 16 );
        };
    }()),

    //  Non-public...