JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://sachinchoolur.github.io/lightGallery/light-gallery/js/lightGallery.js"></script>
<link rel="stylesheet" href="http://sachinchoolur.github.io/lightGallery/light-gallery/css/lightGallery.css">
 
<div style="display:none;" id="video1">
    <video width="100%" controls>
        <source src="http://videoservices.interaktivfabrik.net/v/standard/19975/132b35d897ba1792363e25d6a773f1cd.mp4" type="video/mp4">Your browser does not support HTML5 video.</video>
</div>

<div style="display:none;" id="video2">
    <video width="100%" controls>
        <source src="http://videoservices.interaktivfabrik.net/v/standard/19975/132b35d897ba1792363e25d6a773f1cd.mp4" type="video/mp4">Your browser does not support HTML5 video.</video>
</div>

<div style="display:none;" class="subhtml">
    <div class='customHtml'>
         <h4>Pigloo - Papa Pinguin</h4>

    </div>
</div>


<table id="localVideo">
    <tr >
        <th>#</th>
        <th>Columna</th>
    </tr>
    <tr >
        <td>1</td>
        <td class="selector"  data-html="#video1" data-sub-html=".subhtml">
            <a href="#">
               <img src="http://sachinchoolur.github.io/lightGallery/img/Big-Buck-Bunny.jpg" />
            </a>
        </td>
    </tr>
    <tr >
        <td>2</td>
        <td class="selector" data-html="#video2" data-sub-html=".subhtml">
            <a href="#">
               <img src="http://sachinchoolur.github.io/lightGallery/img/Big-Buck-Bunny.jpg" />
            </a>
        </td>
    </tr>
</table>

CSS

#localVideo th, #localVideo td{
    padding:0.8em;
    border: 1px solid;
}
#localVideo th{
    background-color:#6699FF;
    font-weight:bold;
}

JavaScript

$('#localVideo').lightGallery({
    selector:'.selector'
});