<div class="ytubeBg">
<svg class="play"xmlns="http://www.w3.org/2000/svg" viewBox="-7 0 50 55">
<path class="path" d= "M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" />
</svg>
</div>

body{
    -webkit-user-select: none; 
  -moz-user-select: none;    
  -ms-user-select: none;     
  user-select: none;         
}
.ytubeBg{
  width:300px;
  height:200px;
  text-align:center;
   position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50% ,-50%);
  background:#e62117;
  max-width:100%;
  max-height:auto;
  border-radius:50px;
}
.play{
  max-width:100%;
  max-height:auto;
  cursor:pointer;
  width:300px;
  height:300px;
  
 
}
.path{
fill:#fff;
//fill-rule:evenodd;
//stroke:#3b5998;
//stroke-width:1px;
stroke-linecap:butt;
stroke-linejoin:miter;
//stroke-opacity:1
};

 var playBtn = anime({ 
    targets: '.path',     
    d: {       
      value: [
      "M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z",
      "M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"
      ]  
    }, 
      duration: 300,
      delay: 100,
      easing: 'easeInOutQuart',
      autoplay: false 
  
  }) 

$('.play').on('click',function() {
  
  playBtn.play();
 playBtn.reverse();
});