HTML5 Video // Completely Hide Controls
Solution 1:
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.
Solution 2:
You could hide controls using CSS Pseudo Selectors like Demo: https://jsfiddle.net/g1rsasa3
//For Firefox we have to handle it in JavaScript
var vids = $("video");
$.each(vids, function(){
this.controls = false;
});
//Loop though all Video tags and set Controls as false
$("video").click(function() {
//console.log(this);
if (this.paused) {
this.play();
} else {
this.pause();
}
});video::-webkit-media-controls {
display: none;
}
/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->
<video width="800" autoplay controls="false">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>Solution 3:
A simple solution is – just to ignore user interactions :-)
video {
pointer-events: none;
}
Solution 4:
First of all, remove video's "controls" attribute.
For iOS, we could hide video's buildin play button by adding the following CSS pseudo selector:
video::-webkit-media-controls-start-playback-button {
display: none;
}