Aperture video play button/reveal -- clip-path approach

aperture-video-play-button-reveal-clip-path-approach.markdown

Aperture video play button/reveal -- clip-path approach

Inspired by @keyframers https://codepen.io/shshaw/pen/BxLbqO/ aperture video button. Need to figure out how to make it fixed size!

Video from https://coverr.co/

A Pen by Eric Johnson on CodePen.

License.

index.html

<div class="video-button" data-aperture="closed">
<div class="video-container" >
  <video class="actual-video" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/502545/Oculus.mp4">
  </video>
  <div class="play-button__aperture--left"></div>
  <div class="play-button__aperture--top-right"></div>
  <div class="play-button__aperture--bottom-right"></div>
</div>
</div>

script.js

console.clear();

var videoEl = document.querySelector('video');
document.querySelector('.video-button').addEventListener('click', 
                                                            function(){
  if(this.dataset.aperture === 'open') {
    this.dataset.aperture = 'closed';
    videoEl.pause();
    videoEl.progress = 0;
  } else {
    this.dataset.aperture = 'open';
    videoEl.play();
  }
});

style.sass

//set to "white" to hide aperture structure
$aperture-bg: rgba(255, 255, 255, 0.9)
//$aperture-bg: white



body
  background: #ddd
  
.video-button,
.video-container
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0
  margin: auto
  --video-width: 80vw
  width: var(--video-width)
  height: calc(var(--video-width) / 1.77)  

.video-button
  cursor: pointer
  clip-path: polygon(30% 20%, 70% 20%, 70% 80%, 30% 80%)
  transition: 0.6s cubic-bezier(0.6, 0, 0.4, 1)
  &[data-aperture="open"]
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
    
 
.video-container  
  overflow: hidden
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/502545/2018-06-01_08-51-13.png)

.actual-video
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  width: 100%
  height: 100%
  transition: 0.6s linear
  transform: scale(1)
  [data-aperture="open"] &
    transform: scale(1.2)
  
@mixin play-button__aperture()
  position: absolute
  background: $aperture-bg
  transition: 0.5s 0.1s cubic-bezier(0.6, 0, 0.4, 1)
  [data-aperture="open"] &
    transition-delay: 0s
  
.play-button__aperture--left
  @include play-button__aperture()
  top: 0
  left: 0
  width: 100%
  height: 100%
  clip-path: polygon(0% 0%, 40% 0%, 40% 100%, 0% 100%)
  [data-aperture="open"] &
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)
  
.play-button__aperture--top-right
  @include play-button__aperture()
  top: 0
  left: 0
  width: 100%
  height: 100%
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%)
  [data-aperture="open"] &
    clip-path: polygon(100% 0%, 100% 0%, 100% 0%)
  
.play-button__aperture--bottom-right
  @include play-button__aperture()
  top: 0
  left: 0
  width: 100%
  height: 100%
  clip-path: polygon(0% 100%, 100% 100%, 100% 20%)
  [data-aperture="open"] &
    clip-path: polygon(100% 100%, 100% 100%, 100% 100%)