JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="testid">Click to replace element</div>
</div>

CSS

div {
    height:50px;
    background-color:green;
    color:white;
    cursor:pointer;
    width:200px;
}

JavaScript

$('#container').on('pause play ended', '#testid', function (e) {
    $('body').append('<br>Event triggered: ' + e.type);
});
$('#testid').click(function () {
    $('#testid').replaceWith('<video muted autoplay controls preload="auto" id="testid" width="500"> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" /> <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm" /> <img src="http://dummyimage.com/1044x585/000/fff" /></video>');
});