html, body {
  overflow: hidden;
}


video {
  border:none;
  outline:none;
  z-index:-99999;
  width: 100%;
  height: 100%; 
  right: 0;
  bottom: 0;
  top:0;
  left:0;
  overflow: hidden;
  object-fit: cover;
  background-position: center center;
  background-size: contain;
}

/* controls */

.controls {
	height:8.0971659919028340080971659919028%; /* of figure's height */
}

.controls > * {
	width:15px;
	height:15px;
}

.controls button {
  	border:none;
  	cursor:pointer;
  	text-indent:-99999px;
  	background-size:contain;
  	background-repeat:no-repeat;
  	z-index: 99999;
  	background:transparent;
  	background-size:contain;
  	background-repeat:no-repeat;
  	position: relative;
  	top: -55px;
  	left: 40px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.controls button:hover { 
	opacity:0.5;
}
.controls button:focus {
	outline: none;
	}

.controls button[data-state="play"] {
	background-image: url('http://chriscawkwell.com/imgs/play.png');
}
.controls button[data-state="pause"] {
	background-image: url('http://chriscawkwell.com/imgs/pause.png');
}