Styling Browser-Native Video Controls

video::-webkit-media-controls{  filter: hue-rotate(180deg) brightness(0.9);}

<h1>Styling video controls</h1><video controls src="https://a.desu.sh/zflbzy.webm"><</video>

HTML5 Video // Completely Hide Controls

Like this:

<video width="300" height="200" autoplay="autoplay">
  <source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>

controls is a boolean attribute:

Note: The values "true" and "false" are not allowed on boolean
attributes. To represent a false value, the attribute has to be
omitted altogether.

Need to show HTML5 Video Controls on Hover or Play

We cannot really control this behavior as it's managed internally by the browser. All we can do is to specify the controls attribute and the browser will do the rest.

For example: in Firefox (v59b when this is written) the controls will fade out when mouse is outside the element when the video is playing even if the controls attribute is set - they will show if not playing, kind of the opposite you're after. There is no way to force the controls to stay visible when the user moves the mouse outside the video element.

The only way to properly handle this cross-browser and with exact desired behavior is to build a custom controls UI for the player. This of course means more code is needed to handle the various events so you can update and manage the UI; it may also be a challenge when it comes to platform/browser specific look. But it will on the other hand give you grain control.

An alternative is to look at some libraries which wraps the video element into custom UI controls and see if they allow you to force the controls to stay visible with the given conditions. See for example videojs as a starting point.

A small but incomplete example (add functionality, event handlers, design as needed):

var $container = $("#video1");var $video = $container.children("video"), video = $video[0]var $controls = $container.children(".controls");var $play = $controls.children("button");
// control visibility$container.on("mouseover mouseout", function(e) {  $controls.css("display", e.type === "mouseout" && video.paused ? "none" : "block");});
// play or pause$play.on("click", toggle);$video.on("click", toggle);
function toggle() {  video[video.paused ? "play" : "pause"]();}
// todo: cover more events (seeked, error etc.)$video.on("play pause ended", updateUI);
// update control UI elements (todo: update time/progress etc.)function updateUI() {  $play.text(video.paused ? "Play" : "Pause")}

.container {  position:relative;  display:inline-block;  font-size:0;  }.container > .controls {  position:absolute;  bottom:0;  width:100%;  background:rgba(255,255,255,0.3);  padding:7px;  box-sizing:content-box;  z-index:10000;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id=video1 class=container>  <video width=640 muted src="//media.w3.org/2010/05/sintel/trailer.mp4"></video>  <div class=controls style="display:none">    <button>Play</button>  </div></div>