JSFiddle - React, Tailwind, and code Playground

by Colin Soderstrom

HTML

<div class="video-player">
  <div class="video-thumbnail">
    <img src="thumbnail.jpg" alt="video thumbnail">
  </div>
  <div class="video-controls">
    <button class="play-button"></button>
  </div>
</div>
<div class="lightbox">
  <div class="lightbox-content">
    <span class="close-button">&times;</span>
    <video controls>
      <source src="video.mp4" type="video/mp4">
    </video>
  </div>
</div>

CSS

.video-player {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.play-button {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
}

.lightbox-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: #ccc;
  cursor: pointer;
}

JavaScript

$(document).ready(function(){
  $('.play-button').on('click', function() {
    $('.lightbox').fadeIn();
  });

  $('.close-button').on('click', function() {
    $('.lightbox').fadeOut();
  });
});