<div id="atlanticlight">
<video controls>
	<source src="http://thenewcode.com/assets/videos/atlantic-light.webm">
	<source src="http://thenewcode.com/assets/videos/atlantic-light.mp4">
</video>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" id="playpause" xmlns:xlink="http://www.w3.org/1999/xlink">
	<title>Play</title>
	<polygon points="12,0 25,11.5 25,39 12,50" id="leftbar" />
	<polygon points="25,11.5 39.7,24.5 41.5,26 39.7,27.4 25,39" id="rightbar" />
		<animate to="7,3 19,3 19,47 7,47" id="lefttopause" xlink:href="#leftbar" attributeName="points" dur=".3s" begin="indefinite" fill="freeze" />
		<animate to="12,0 25,11.5 25,39 12,50" id="lefttoplay" xlink:href="#leftbar" attributeName="points" dur=".3s" begin="indefinite" fill="freeze" />
		<animate to="31,3 43,3 43,26 43,47 31,47" id="righttopause" xlink:href="#rightbar" attributeName="points" dur=".3s" begin="indefinite" fill="freeze" />
		<animate to="25,11.5 39.7,24.5 41.5,26 39.7,27.4 25,39" id="righttoplay" xlink:href="#rightbar" attributeName="points" dur=".3s" begin="indefinite" fill="freeze" />
</svg>
</button>
</div>

* {
  box-sizing: border-box;
}
body {
  background: #333;
  margin: 3rem;
}
#atlanticlight {
  position: relative;
  font-size: 0;
  width: 50%;
  margin: 0 auto;
}
#atlanticlight video,
#atlanticlight button {
  width: 100%;
  height: auto;
}

#atlanticlight button svg {
  width: 55%;
  margin: 0 auto;
}

#atlanticlight video,
#atlanticlight button {
  position: absolute;
  top: 0;
}

#atlanticlight button {
  background: transparent;
  outline: none;
  border: none;
  cursor: pointer;
}

#atlanticlight button svg {
  fill: #fff;
  padding: 3rem;
  transition: .6s opacity;
}

#playpause {
  display: none;
}

.playing {
  opacity: 0;
}

var atlanticlight = document.querySelector("#atlanticlight video"),
playpause = document.getElementById("playpause"),
lefttoplay = document.getElementById("lefttoplay"),
righttoplay = document.getElementById("righttoplay"),
lefttopause = document.getElementById("lefttopause"),
righttopause = document.getElementById("righttopause");
atlanticlight.removeAttribute("controls");
playpause.style.display = "block";
playpause.addEventListener('click',function(){
	if (atlanticlight.paused) {
		atlanticlight.play();
		playpause.classList.add("playing");
		lefttopause.beginElement();
		righttopause.beginElement();
		
	} else { 
		atlanticlight.pause();
		lefttoplay.beginElement();
		righttoplay.beginElement();
		playpause.classList.remove("playing");
	}
	
},false);