JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tableBin" border="1">
    <tr>
        <th>name</th>
        <th>description</th>
    </tr>
<tbody>
    <tr>
        <td><a class="video" href="clip/location/A001C012_111129_R1VL.mov">A001C012_111129_R1VL.mov</a></td>
        <td>Adipiscing elit. Fusce bibendum, leo non.</td>
    </tr>
    <tr>
        <td><a class="video" href="clip/location/A001C012_111130_R1VL.mov">A001C012_111130_R1VL.mov</a></td>
        <td>Consectetur adipiscing elit. Fusce bibendum, leo non.</td>
    </tr>
</tbody>

</table>

<div id="overlay" class="hide">
    <div id="blackOut">
        <div id="box">
            <div id="controls"><a id="close-button" href="#"><img border="0" alt="close" width="25px" height="25px" src="images/close.png"></a></div>
            <div id="video-container"></div>
        </div>
    </div>
</div>

CSS

.hide {
    display: none;
}

JavaScript

$(document).ready(function () {
    $("#tableBin a.video").click(function() {
    
            $('#overlay').removeClass("hide");
            $('#blackOut').removeClass("hide").addClass("blackOut");
            $('#box').removeClass("hide").addClass("box");
            $('#controls').removeClass("hide").addClass("controls");
            $('#video-container').removeClass("hide").html(video);
        });
    
        $("#close-button").click(function() {
            $('#overlay').addClass("hide");
            $('#video-container').addClass("hide").html("");
            return false;
        });
});