Coder Wrap provides free to use snippets

  /**Typeo CSS Start**/
  @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap');
  * {
  box-sizing: border-box;
  }
  body {
  margin: 0px;
  background-color: #fff;
  }
  /**Typeo CSS End**/
  .video-full-scn, .video-full-scn * {
  --page-width: 1330px;
  --base-fm: 'Rubik', sans-serif;
  --title-size: 26px;
  --base-size: 16px;
  --white-clr: #ffffff;
  --theme-clr: #c25b41;
  --bg-clr: #000000;
  }
  .video-full-scn {
  width: 100%;
  position: relative;
  font-family: var(--base-fm);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  }
  .video-overlay {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
  }
  .video-full-scn img {
  width: 100%;
  height: auto;
  opacity: 0;
  }
  .video-full {
  width: 100%;
  object-fit: cover;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  }
  .video-cont {
  position: absolute;
  left: 50%;
  max-width: 600px;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--white-clr);
  z-index: 5;
  text-align: center;
  padding: 15px;
  line-height: 1.4;
  }
  .video-cont h2 {
  margin: 0px;
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 1px;
  }
  .video-cont .videoplay-btn {
  font-size: 18px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  cursor: pointer;
  }
  .video-cont .videoplay-btn .video-icon {
  width: 50px;
  height: 50px;
  background-color: var(--white-clr);
  border-radius: 100%;
  margin-right: 15px;
  position: relative;
  }
  .video-cont .videoplay-btn .video-icon:before {
  content: '';
  position: absolute;
  left: 3px;
  right: 0px;
  bottom: 0px;
  top: 1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--theme-clr);
  margin: auto;
  }
  /**Video Start**/
  .video-model-group {
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  }
  .videomodel-show {
  opacity: 1;
  pointer-events: auto;
  }
  .video-model-group .video-overlay {
  z-index: 9999;
  }
  .video-model {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: auto;
  z-index: 99999;
  width: calc(900px - 30px);
  background-color: #ffff;
  transform: translate(-50%, -50%);
  height: 500px;
  }
  .video-model video {
  width: calc(100% - 30px);
  display: block;
  position: absolute;
  left: 15px;
  top: 15px;
  height: calc(100% - 30px);
  object-fit: cover;
  }
  .videoclose {
  position: absolute;
  right: -20px;
  top: -20px;
  font-size: 22px;
  background-color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  text-align: center;
  line-height: 36px;
  box-shadow: #000 0 0 6px;
  cursor: pointer;
  }

//Video Open
 let video_btn = document.querySelector('.videoplay-btn');
 let video_model = document.querySelector('.video-model-group');
 let datavideo = video_btn.getAttribute('data-video');
 let video_source = document.querySelector('.video-model video');
 video_btn.addEventListener('click', function(){
  video_model.classList.add('videomodel-show');
 video_source.setAttribute('src',datavideo);
 });
 //Video Close
 document.querySelector('.videoclose').addEventListener('click', function(){
   video_model.classList.remove('videomodel-show');
 video_source.setAttribute('src','');
});