HTML5 Video // Completely Hide Controls

Question

How Could I completely hide HTML5 video controls?

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

false didn't work -- how is this done?

Cheers.

score 223 · Accepted Answer · edited Oct 20 '17 at 15:13

223

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.

edited Oct 20 '17 at 15:13

andreas

16,357
12
72
76

answered Jan 04 '13 at 17:08

robertc

74,533
18
193
177

1

So technically this works; and I guess, is the answer. Though; removing 'Controls' within the HTML5 Video mark-up, kills the video on iPad; so am in need of another solution. – Dr Upvote Jan 04 '13 at 20:02
1

@1977 [This question is probably relevant](http://stackoverflow.com/q/10856209/8655) – robertc Jan 05 '13 at 00:14
3

You could try to load the tag including the control attribute and remove it after pageload with some javascript: var video = document.getElementById('myvideo'); video.control = false; – user3072843 Oct 19 '15 at 08:21
66

`The values "true" and "false" are not allowed on boolean attributes`. talk about confusing. – totallyNotLizards Nov 10 '15 at 14:39
1

@jammypeach The attributes are boolean because they have two states: they exist or they don't – robertc Nov 10 '15 at 16:02
@robertc that may be but it's also inconsistent with common markup syntax. if browsers manufacturers wanted to they could start checking if a value is defined and if that value is true or false and behave accordingly. once the feature hits critical mass we eliminate the issue. – 1.21 gigawatts Oct 16 '16 at 10:36
@robertc ... the below link for "boolean attribute" is no longer available now. Please update the same ... `http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attribute` – Shiv Nov 04 '16 at 10:37
4

'true' and 'false' are allowed on boolean attributes, but both of those, and any other, are equivalent to 'true'. It is the presence of the attribute that determines its boolean value, not what is assigned to it. – Max Waterman Oct 21 '19 at 10:37
1

"boolean attribute" is not the same as "attribute with boolean value". But I 100% agree that this is confusing as hell – gmanjon Apr 27 '22 at 10:57

AbidCharlotte49er · Answer 2 · 2017-06-21T19:53:31.630

66

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>

edited Jun 21 '17 at 19:53

answered Mar 29 '16 at 19:10

AbidCharlotte49er

914
1
8
11

This works great for Chrome but not Firefox. Do you have a cross-browser solution? – TinyTiger Jun 18 '17 at 09:47
Need to remove them with CSS or JavaScript because I'm hacking something together and can't directly edit the video tag code – TinyTiger Jun 19 '17 at 02:47
Hey Benny for Mozilla. You need to add vendor prefixed css for all of them like "-moz-media-controls-play-button" . Thanks – AbidCharlotte49er Jun 19 '17 at 13:03
3

Tried adding the prefixes but it didn't work. Here is an updateed [JSfiddle](https://jsfiddle.net/g1rsasa3/588/) and here is the CSS I used `video::-webkit-media-controls, video::-moz-media-controls, video::-o-media-controls, video::-ms-media-controls { display: none !important; }` – TinyTiger Jun 20 '17 at 03:15
Benny, I checked in Mozilla document those vendor prefixed pseudo CSS is not available. You can handle this over JavaScript. Please see my code snippet. above . I have edited my original solution. "For Firefox we have to handle it in JavaScript " Thanks Good luck – AbidCharlotte49er Jun 21 '17 at 19:54
Unfortunatley, that JS is not working in Firefox either. – TinyTiger Jun 22 '17 at 06:26
It is working fine for me. Check this out https://jsfiddle.net/abidCharlotte49er/g1rsasa3 – AbidCharlotte49er Jun 23 '17 at 12:38
Ok that one works! Sorry I didn't realise I had to remove that second part of the JS. Thanks for your help. Upvoted this :) – TinyTiger Jun 24 '17 at 02:39
I found what seems to be a complete list: https://opensource.apple.com/source/WebCore/WebCore-7602.2.14.0.5/css/mediaControls.css.auto.html – Max Waterman Oct 21 '19 at 10:54
1

Is it possible to dynamically show/hide any of these individual controls. For example: apply css video::-webkit-media-controls-current-time-display {display: none;} initially to hide the current time control but when the video is played, show the current time control by updating the css class video::-webkit-media-controls-current-time-display {/*display: none;*/}. Or apply a different css class which shows the current time. Thanks. – user4848830 Jan 05 '20 at 06:05
On a browser with JS disabled, even with no `controls` attribute, the controls will still be there (at least on Chromium/Safari browsers). Using `video::-webkit-media-controls` is an appropriate solution here! – HeySora Jan 09 '22 at 01:05

Jakob E · Answer 3 · 2018-01-18T13:38:41.070

51

A simple solution is – just to ignore user interactions :-)

video {
  pointer-events: none;
}

edited Jan 18 '18 at 13:38

answered Aug 21 '17 at 09:53

Jakob E

4,476
1
18
21

9

This works except that the controls are shown on initial load. – m4n0 Jan 25 '19 at 01:53

score 9 · Answer 4 · answered Feb 23 '21 at 05:28

9

There are two ways to hide video tag controls

Remove the controls attribute from the video tag.

Add the css to the video tag

video::-webkit-media-controls-panel {
display: none !important;
opacity: 1 !important;}

answered Feb 23 '21 at 05:28

Someshver Thakur

162
1
11

1

This will only works for Chrome browser, I want this for all browsers. – Muhammad Usama Rabani Dec 24 '21 at 05:03

score 8 · Answer 5 · answered Jun 20 '17 at 03:41

8

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;
}

answered Jun 20 '17 at 03:41

Alan

161
2
6

1

Does not work on iOS in low power mode. – Rehmat Dec 09 '22 at 08:07

score 4 · Answer 6 · answered Jun 27 '20 at 06:58

4

<video width="320" height="240" autoplay="autoplay">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

answered Jun 27 '20 at 06:58

Fahimeh Ahmadi

813
8
13

1

I agree. The simplest solution is to never put the attribute to begin with. – PRMan Oct 29 '20 at 20:41

Richy Zuo · Answer 7 · 2017-03-17T13:58:08.203

3

This method worked in my case.

video=getElementsByTagName('video');
function removeControls(video){
  video.removeAttribute('controls');
}
window.onload=removeControls(video);

edited Mar 17 '17 at 13:58

answered Mar 17 '17 at 13:13

Richy Zuo

31
3

score 0 · Answer 8 · edited Sep 26 '16 at 21:59

0

document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);


function initialiseMediaPlayer() {

    mediaPlayer = document.getElementById('media-video');

    mediaPlayer.controls = false;

    mediaPlayer.addEventListener('volumechange', function(e) { 
        // Update the button to be mute/unmute
        if (mediaPlayer.muted) changeButtonType(muteBtn, 'unmute');
        else changeButtonType(muteBtn, 'mute');
    }, false);  
    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
}

edited Sep 26 '16 at 21:59

Petter Friberg

21,252
9
60
109

answered Sep 26 '16 at 21:43

user6884687

21

– user6884687 Sep 26 '16 at 21:46

HTML5 Video // Completely Hide Controls

8 Answers8

Linked

Related