@animation: play-video 60s linear infinite;

.transition(@prop) {
  transition: @prop 0.5s ease-in-out;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222;
}

.player {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 50vw;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .transition(background);
  }

  &:hover {
    &::before {
      background: rgba(0, 0, 0, 0.5);
    }
    label {
      opacity: 1;
    }
  }
}

.frame {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url("https://images.unsplash.com/photo-1473346782721-d6cef5897f07?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0cf4c424e0e654544e5237bb1d11747e&auto=format&fit=crop&w=1567&q=80")
    bottom left;
}

label {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  cursor: pointer;
  opacity: 0;
  .transition(opacity);

  &::before {
    content: "";
    position: relative;
    // transition: border .2s ease-in-out;
  }
  &::before {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #fff;
    border-bottom: 25px solid transparent;
  }
}

input {
  display: none;
  ~ .frame {
    animation: @animation;
    animation-play-state: paused;
  }
  &:checked {
    + label {
      &::before {
        width: 15px;
        border: none;
        border-right: 15px solid #fff;
        border-left: 15px solid #fff;
        height: 50px;
        background: transparent;
      }
    }
    ~ .frame {
      animation: @animation;
      animation-play-state: running;
    }
  }
}

@keyframes play-video {
  0% {
    background-position: bottom left;
  }
  20% {
    background-position: center center;
  }
  40% {
    background-position: top center;
  }
  50% {
    background-position: top right;
  }
  70% {
    background-position: bottom right;
  }
  85% {
    background-position: top left;
  }
  100% {
    background-position: bottom left;
  }
}

// no JS here ;P