JSFiddle - React, Tailwind, and code Playground

by Nalin Aggarwal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="M_Start" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">

  <!--Video Div for Content A-->
  <div id="Start_Video" style="position:absolute;">
    Video Div for Content A
  </div>
</div>
<div id="I_Page" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;display:none">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td align="center">
        <div id="i_page_content">
          Video Div for Content B
        </div>

      </td>
    </tr>
  </table>
</div>
<br/>
<br /> interval : <span id="interval"></span>

JavaScript

var interval = 0;

 $(function() {
   HideShowDiv();
 });

 function HideShowDiv() {
   interval++;
   if (interval <= 10) {
     $('#M_Start').show();
     $('#I_Page').hide();
   } else {
     $('#M_Start').hide();
     $('#I_Page').show();
     interval = interval == 20 ? 0 : interval;
   }
   $('#interval').html(interval)
   setTimeout(HideShowDiv, 1000)
 }