button {
background-color: #666;
border: medium none;
color: #fff;
display: block;
font-size: 18px;
left: 0;
margin: 0 auto;
padding: 8px 16px;
position: absolute;
right: 0;
top: 50%;
}<button class="active">play</button>
<video id="banner-video" preload="auto" loop>
<source src="https://static.videezy.com/system/resources/previews/000/002/719/original/cloudy-sunset.mp4">
</video>video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}$( document ).ready(function() {
var ctrlVideo = document.getElementById("video");
$('button').click(function(){
if ($('button').hasClass("active")){
ctrlVideo.play();
$('button').html("Pause");
$('button').toggleClass("active");
} else {
ctrlVideo.pause();
$('button').html("play");
$('button').toggleClass("active");
}
});
});