JSFiddle - React, Tailwind, and code Playground

by Deividas Krupstas

HTML

<div class="wrapper">
    <video id="myMovie" class="video">
        <source src="https://kartrausers.s3.amazonaws.com/richcostello/6300005_1572209022139Newest_webinar.mp4" type="video/mp4" />
    </video>
    <div class="playpause"></div>
</div>

<div id="element_1">
          <div data-embed="true">
            <!-- ScheduleOnce button START -->
            <button
              class="kartra_button1 kartra_button1--white kartra_button1--royal-blue-color kartra_button1--roboto-font kartra_button1--solid kartra_button1--large kartra_button1--squared kartra_button1--shadow-medium pull-center toggle_custom"
              id="SOIBTN_AttractHighEndClientsStrategyCall"
              style="width: 280px;font-weight: 400; background-color: rgb(255, 184, 54); color: rgb(255, 255, 255); margin: 0px auto 20px; font-family: Roboto; border-color: rgb(255, 255, 255);"
              data-height="580"
              data-psz="00"
              data-so-page="AttractHighEndClientsStrategyCall"
              data-delay="1"
            >
              <span
                class="kartra_icon__icon fa fa-check"
                style="color: rgb(255, 255, 255); border-color: rgb(255, 255, 255); font-weight: 400;"
              ></span
              >Schedule my call
            </button>
            <script
              type="text/javascript"
              src="https://cdn.oncehub.com/mergedjs/so.js"
            ></script>
            <!-- ScheduleOnce button END -->
          </div>
        </div>

CSS

.video {
    width: 100%;
    border: 1px solid black;
}
.wrapper{
    display:table;
    width:auto;
    position:relative;
    width:50%;
}
.playpause {
    background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
    background-repeat:no-repeat;
    width:50%;
    height:50%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
}

JavaScript

$('.video').parent().click(function () {
    if($(this).children(".video").get(0).paused){
        $(this).children(".video").get(0).play();
        $(this).children(".playpause").fadeOut();
    }else{
       $(this).children(".video").get(0).pause();
        $(this).children(".playpause").fadeIn();
    }
});

 jQuery(document).ready(function() {
        jQuery('#element_1').hide();
        document.getElementById('myMovie').addEventListener('timeupdate', function() {
            if (this.currentTime > 2) {
              jQuery('#element_1').fadeIn();
            }
          });
      });