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>
<div id="footnote"></div>
<button id="btn">Toggle Events</button>

JavaScript

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

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

// add click eventlistener for our button
document.getElementById( "btn" ).addEventListener( "click", function( event ) {
    
    // toggle our footnote on/off with each click
    popcorn.toggle( "footnote" );
});

// play popcorn
popcorn.play();

// make the video loop
popcorn.loop( true );


// NOTE:
//  IF AN EVENT IS ALREADY SHOWN, IT WILL NOT BE HIDDEN WHEN TOGGLED.