HTML5-video - autoplay

HTML

<video id="bgvid" autobuffer controls>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
<div id="baba">
  <button>
     O Y N A T
  </button>
</div>

CSS

html {
  padding: 20px 0;
  background-color: #efefef;
}

body {
  width: 400px;
  padding: 40px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

video {
  width: 400px;
  display: block;
  opacity: .2;
  transition: 1s opacity;
}

.stopfade {
  opacity: 1;
}

JavaScript

var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#baba button");

if (window.matchMedia('(prefers-reduced-motion)').matches) {
  vid.removeAttribute("autoplay");
  vid.pause();
  pauseButton.innerHTML = "D U R D U R";
}

vid.addEventListener('pause', function() {
  vid.classList.remove('stopfade');
  pauseButton.innerHTML = "O Y N A T";
});

vid.addEventListener('play', function() {
  vid.classList.add('stopfade');
  pauseButton.innerHTML = "D U R D U R";
});


pauseButton.addEventListener("click", function() {
  if (vid.paused) {
    vid.play();
  } else {
    vid.pause();
  }
})