Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Aperture video play button/reveal -- clip-path approach
<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>
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();
}
});
//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%)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.