JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
    <video id="hero_video" controls="" autoplay="autoplay" preload poster="http://media.w3.org/2010/05/sintel/poster.png" style="width:100%; height:100%" onabort="alert('Video load aborted')">
        <source id="mp4" src="http://leongaban.com/v6/videos/clouds.mp4" type="video/mp4">
      <source id="webm" src="http://leongaban.com/v6/videos/clouds.webm" type="video/webm">
      <source id="ogv" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>
<div class='content'>
    I'm content!! :D 
</div>

CSS

html, body { width:100%; height:100%; margin:0; padding:0; }
.content {
    margin-top:300px;
    background: black;
    color:white;
}

JavaScript

$("#hero_video").bind('stop', function(e) {
    console.log('stopped');
    //alert('stopped');
});

/*
$("video").bind('stop', function(e) {
    console.log('stopped');
    alert('stopped');
}, true);
*/