JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://indiciopponibili.com/noindex/webanimdemo/popcorn.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>
<br />
<div id="text-div" ></div>
<br />
<div id="event-div" class="small" >
    When "trackstart" is fired, this text will grow. <br />
    When "trackend" is fired, it will shrink!
</div>

CSS

div#text-div {
    font-size: 20px;
    border: 1px solid;
    height: 24px;
    width: 200px;
}

div#event-div.small {
  position: relative;
  transition: font-size 1s ease;
  -moz-transition: font-size 1s ease;
  -o-transition: font-size 1s ease;
  -webkit-transition: font-size 1s ease;
  font-size: 14px;
}

div#event-div.large {
  position: relative;
  transition: font-size 1s ease;
  -moz-transition: font-size 1s ease;
  -o-transition: font-size 1s ease;
  -webkit-transition: font-size 1s ease;
  font-size: 24px;
}

JavaScript

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

// Get a reference to the div with the id "event-div" 
var eventDiv = document.getElementById("event-div");


// Listen for the "trackstart" event, and execute a function when it is triggered
popcorn.on("trackstart", function() {

    // Apply the "large" class to the text in event-div
    eventDiv.className = "large";

    // Log the event to the console
    console.log("\"trackstart\" event fired!");
});

// listen for the "trackend" event, and execute a function when it is triggered
popcorn.on("trackend", function() {

    // Apply the "small" class to the text in event-div
    eventDiv.className = "small";

    // Log the event to the console
    console.log("\"trackend\" event fired!");
});

// Command the video to play, loop, and be quiet! 
popcorn.play().muted(true);