JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<table width="100%">
    <tr>
        <td colspan="2" style="background-color:#ccc" class="botom-title">Essentials - Soft & durable leathers for everyday use!</td>
    </tr>
    <tr>
        <td width="30%" class="demo-product-video">
            <img src="https://www.leatherhidestore.com/media/wysiwyg/Essentials6-actbold.gif" alt="" />
        </td>
        <td  class="second">
            <ul>
                <li>#1 selling top grain</li><li>Very soft!</li>
                <li>Micro pigmented</li><li>Natural markings / few</li>
                <li>Rich, uniform color</li><li>High traffic uses</li>
                <li>Natural grain texture*</li><li>Wholesale price $3.95 sq ft!</li>
            </ul>
            <p>Application: Furniture, Auto, Leathercraft</p>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="right" style="text-align:right;    padding-right: 12px;    margin-bottom: -4px !important;"><i span="size:11pt">*Black Cat & Black Pebble are pebble grain texture</i>
        </td>
    </tr>
</table>
<div id="ModalOverlay" class="modalOverlay">&nbsp;</div>
<div class="popup-section-video">
    <span class="modalClose" title="Close">&nbsp;</span>
    <div class="content-area">
        <div class="thum-video">
             <iframe id="popup-youtube-player" width="800" height="450" src="https://www.youtube.com/embed/ft7x7e-ZJLk?autoplay=1&enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>
</div>

CSS

.modalOverlay{
            opacity: 0.4; 
            height: 100%; 
            width: 100%; 
            position: fixed; 
            left: 0px; 
            top: 0px; 
            z-index: 9;
            background: #000;
            display: none;
        }
        .popup-section-video{
            margin: 0 auto;
            text-align: center;
            width: 70.6%;
            background: #f2f2f2;
            box-sizing: border-box;
            z-index: 999;
            position: fixed;
            left: 0;
            right: 0;
            top: 30px;
            display: none;
        }
        .popup-section-video .content-area{
            padding: 40px;
            position: relative;
        }
        .popup-section-video .thum-video{
            width: 100%;
        }
        .popup-section-video .thum-video iframe {
            width: 100%;
        }
        .popup-section-video .modalClose{
            width: 30px;
            height: 30px;
            position: absolute;
            right: 0;
            top: 0;
            border-radius: 100%;
        }
        .popup-section-video .modalClose:before{
            content: 'x';
            width: 30px;
            height: 30px;
            line-height: normal;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            z-index: 999;
            font-size: 24px;
            color: #fff;
            background-color: #000;
            border-radius: 100%;
        }
        .demo-product-video{
            cursor: pointer;
        }
        table{
            display: block;
        }

JavaScript

jQuery(document).ready(function(){
        jQuery('.demo-product-video').click(function(){
            jQuery('.popup-section-video').show();
            jQuery('.modalOverlay').show();
        });
        jQuery('.modalOverlay,  .modalClose').click(function(){
            jQuery('.popup-section-video').hide();
            jQuery('.modalOverlay').hide();
			jQuery('#popup-youtube-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');    
        });
    });