JSFiddle - React, Tailwind, and code Playground

by waqasahmad724

HTML

<div class="video-container">
    <video id="main-video" width="640" height="350">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
    <p id="text">Way to wear it</p>
    <span id="custom-play-button">Play</span>
    <span class="thumbnail"><img src="https://www.w3schools.com/html/pic_trulli.jpg" alt=""></span>
</div>

CSS

.video-container {
  position: relative;
  width: 638px;
}
#text {
  position: absolute;
  right: 20px;
  top: 20px;
}
#custom-play-button {
  position: absolute;
  top: 42%;
  left: 53%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.thumbnail {
  width: 80px;
  height: 80px;
  display: block;
  cursor: pointer;
}
.thumbnail img {
  max-width: 100%;
  height: auto;
  display: block;
}

JavaScript

$('.video-container').each(function () {
    var video = $(this).find('video');
    var plainVideo = video.get(0);/*DOM video object, unwrapped from jQuery*/
    var playBtn = $(this).find('#custom-play-button');
    var playBtn1 = $(this).find('.thumbnail');
    var text= $(this).find('#text');

    playBtn.on('click', function () {
        video.get(0).addEventListener('ended',myHandler,false);
        plainVideo.play();
        playBtn.css('visibility', 'hidden');
        text.css('visibility', 'hidden');

        function myHandler() {
            playBtn.css('visibility', 'visible');
            text.css('visibility', 'visible');
        }
    });
    
    playBtn1.on('click', function () {
        video.get(0).addEventListener('ended',myHandler,false);
        plainVideo.play();
        playBtn.css('visibility', 'hidden');
        text.css('visibility', 'hidden');
        
        function myHandler() {
            playBtn1.css('visibility', 'visible');
            playBtn.css('visibility', 'visible');
            text.css('visibility', 'visible');
        }
    });
});