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="300" height="150" src="https://www.youtube.com/embed/Rfms5_4bihE?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" 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("#popup-youtube-player")[0].src += "&autoplay=1";
            
        });
        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":""}', '*');    
        });
    });