alt video player

by Vince

HTML

<div id="video-container-frame">
  <div id="video-container">
    <video src="https://player.vimeo.com/external/378900398.hd.mp4?s=e5bea845150bcc3177779e2ae6b381271d7ccc4c&profile_id=175" id="video-element"></video>
    <img src="https://web.cdn.crystalfunds.com/public-web/the-ones/20190301/videos/home-e/crystal-capital-partners-firm-video.jpg" alt="" id="video-poster-img">
  </div>
</div>

SCSS

#video-container {
  width: 700px; margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  #video-element {
    width: 100%;
    height: auto;
    visibility: hidden;
    grid-column: 1/2;
    grid-row: 1/2;
    &.play {visibility: visible;}
  }
  #video-poster-img {
    grid-column: 1/2;
    grid-row: 1/2;
    width: 100%;
    transition: opacity 1s;
    opacity: 1;
    &.fade {opacity: 0}
  }
}

JavaScript

let poster = document
	.querySelector('#video-poster-img')
let video = document 
	.querySelector('#video-element')
poster.onclick = function () {
	poster.className = 'fade'
  video.className = 'play'
	video.play()
}