<button id="video_pause">Pause<br />Video</button>


 <video autoplay loop poster="{{ base }}/assets/img/bg/frontpage.jpg" id="bgvid">
   <source src="{{ base }}/assets/vi/0001-0076.webm" type="video/webm">
   <source src="{{ base }}/assets/vi/0001-0076.mp4" type="video/mp4">
 </video>



<script type="text/javascript">


var vid = document.getElementsByTagName("video")[0];vid.playbackRate = 0.1;

var pauseButton = document.getElementById("video_pause");

function vidFade() {

vid.classList.add("stopfade");

}

vid.addEventListener('ended', function() {

// only functional if "loop" is removed

vid.pause();

// to capture IE10

vidFade();

});

pauseButton.addEventListener("click", function() {

vid.classList.toggle("stopfade");

if (vid.paused) {

vid.play();

pauseButton.innerHTML = "Pause Video";

} else {

vid.pause();

 pauseButton.innerHTML = "Resume Video";

}

});


</script>