Edit in JSFiddle

var state = false;
var button = document.querySelector('.youtube')

button.onclick = function() {
  button.classList[state ? 'remove' : 'add']('playing')
  state = !state
}

<button class="youtube">

</button>

.youtube {
    width: 300px;
    height: 200px;
    background: #e62117;
    border-radius: 50px;
    border-width: 0;
    position: relative;
    outline: none;
}

.youtube:before,
.youtube:after {
  content: ' ';
  position: absolute;
  background-color: white;
  height: 40%;
  width: 11.67%;
  top: 30%;
  transition: all 0.5s ease; 
}

.youtube:before {
  left: 38.5%;
  clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
}

.youtube:after {
  clip-path: polygon(0 25%, 100% 50%, 100% 50%, 0 75%);
  -webkit-clip-path: polygon(0 25%, 100% 50%, 100% 50%, 0 75%);
  right: 38.5%;
}


.youtube.playing:before {
  clip-path: polygon(0 0, 70% 0%, 70% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 70% 0%, 70% 100%, 0 100%);
}

.youtube.playing:after {
  clip-path: polygon(30% 0, 100% 0%, 100% 100%, 30% 100%);
  -webkit-clip-path: polygon(30% 0, 100% 0%, 100% 100%, 30% 100%);
}