<div class="wrap">
  <div id="video-wrap">
  <button id="play-btn"><span></span></button>
  <video id="video" playsinline="" poster="https://ak.picdn.net/shutterstock/videos/1041348064/thumb/1.jpg?ip=x480">
   <source src="https://ak.picdn.net/shutterstock/videos/1041348064/preview/stock-footage-marathon-runner-sport-jog-running-man-healthy-lifestyle-triathlete-running-sprinting-endurance.webm" type="video/webm">
  </video>
    </div>
</div>

body {
  background: #444;
}
.wrap {
  width: 100%;
  height: 100vh;
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
}
#video-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  transition: all 700ms cubic-bezier(0.9,0.1,0.55,0.9);
}
#video-wrap.shown {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
#play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  opacity: 1;
  visibility: visible;
  transform: translate(-35%,-50%);
  cursor: pointer;
  z-index: 2;
  transition: all 0.35s ease;
}
#play-btn span {
  display: block;
  width: 0; 
  height: 0; 
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;  
  border-left: 50px solid #fff;
}
#play-btn.hidden {
  opacity: 0;
  visibility: hidden;
}
#video {
  width: 100%;
  height: 100%;
  object-fit: cover;  
}

var playBtn = document.getElementById('play-btn'),
    videoWrap = document.getElementById('video-wrap'),
    videoItem = document.getElementById('video');
 playBtn.addEventListener('click', function () {
        videoWrap.classList.add('shown');
        videoItem.play();
        playBtn.classList.add('hidden');   
 });
videoItem.onended = function() {                  videoWrap.classList.remove('shown');                playBtn.classList.remove('hidden');
};