Video player without buttons

The rule of thumb with media is ALWAYS allow users to decide.  For this reason "Autoplay" of audible  media is not supported by all browsers.   Also, when you take away player controls, many people including myself will never know  your site contains media.  We see only a static image with no way to play it.

MDN Autoplay Guide

https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

This way, the play button is obvious to everyone.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Video Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.video-wrapper { position: relative; }
.video-wrapper > video {
width: 100%;
vertical-align: middle;
}
 .video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
 display: none;
}
.video-overlay-play-button {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px calc(50% - 50px);
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0.95;
cursor: pointer;
background-image: linear-gradient(transparent, #000);
transition: opacity 150ms;
}
.video-overlay-play-button:hover { opacity: 1; }
.video-overlay-play-button.is-hidden { display: none; }
</style>
</head>
<body>
<div class="video-wrapper"> 
<!--CHANGE MP4 AND POSTER IMAGE TO YOUR OWN-->
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png" controls>
<source src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
</div>
<script>

var videoPlayButton,
videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],
videoMethods = {
renderVideoPlayButton: function() {
if (videoWrapper.contains(video)) {
this.formatVideoPlayButton()
video.classList.add('has-media-controls-hidden')
videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
}
},
formatVideoPlayButton: function() {
videoWrapper.insertAdjacentHTML('beforeend', '\
<svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
<circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
</svg>\
')
},
hideVideoPlayButton: function() {
video.play()
videoPlayButton.classList.add('is-hidden')
video.classList.remove('has-media-controls-hidden')
video.setAttribute('controls', 'controls')
}
}
videoMethods.renderVideoPlayButton()
</script>
</body>
</html>

You need controls for device/browsers that do NOT support autoplay - for a lot of devices the sound is muted too. There a re a lot of other considerations but this is a basic example.

<video style="min-width:100%; min-height:100%;" playsinline autoplay loop muted controls>

     <source type="video/mp4" src="/video/test.mp4>

     <source type="video/webm" src="video/test.webm">

</video>