JSFiddle - React, Tailwind, and code Playground

by leongaban

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%">
        <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="http://leongaban.com/v6/videos/clouds.ogv" type="video/ogg">
      <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

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

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