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); }
  .video-button[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"] .actual-video {
    transform: scale(1.2); }

.play-button__aperture--left {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  transition: 0.5s 0.1s cubic-bezier(0.6, 0, 0.4, 1);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 40% 0%, 40% 100%, 0% 100%); }
  [data-aperture="open"] .play-button__aperture--left {
    transition-delay: 0s; }
  [data-aperture="open"] .play-button__aperture--left {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }

.play-button__aperture--top-right {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  transition: 0.5s 0.1s cubic-bezier(0.6, 0, 0.4, 1);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%); }
  [data-aperture="open"] .play-button__aperture--top-right {
    transition-delay: 0s; }
  [data-aperture="open"] .play-button__aperture--top-right {
    clip-path: polygon(100% 0%, 100% 0%, 100% 0%); }

.play-button__aperture--bottom-right {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  transition: 0.5s 0.1s cubic-bezier(0.6, 0, 0.4, 1);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 100%, 100% 100%, 100% 20%); }
  [data-aperture="open"] .play-button__aperture--bottom-right {
    transition-delay: 0s; }
  [data-aperture="open"] .play-button__aperture--bottom-right {
    clip-path: polygon(100% 100%, 100% 100%, 100% 100%); }