HTML5 Video // Completely Hide Controls

Asked 4/1, 2013 at 17:5 Answered 4/2 at 23:30

118

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.

Navarino answered 4/1, 2013 at 17:5 Comment(0)

233

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.

Bartolomeo answered 4/1, 2013 at 17:8 Comment(9)

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. – Navarino 4/1, 2013 at 20:2

@1977 This question is probably relevant – Bartolomeo 5/1, 2013 at 0:14

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; – Valais 19/10, 2015 at 8:21

The values "true" and "false" are not allowed on boolean attributes. talk about confusing. – Coraliecoraline 10/11, 2015 at 14:39

@jammypeach The attributes are boolean because they have two states: they exist or they don't – Bartolomeo 10/11, 2015 at 16:2

@Bartolomeo 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. – December 16/10, 2016 at 10:36

@Bartolomeo ... 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 – Morrison 4/11, 2016 at 10:37

'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. – Blaubok 21/10, 2019 at 10:37

"boolean attribute" is not the same as "attribute with boolean value". But I 100% agree that this is confusing as hell – Cox 27/4, 2022 at 10:57

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>

Foran answered 29/3, 2016 at 19:10 Comment(11)

This works great for Chrome but not Firefox. Do you have a cross-browser solution? – Piroshki 18/6, 2017 at 9:47

Need to remove them with CSS or JavaScript because I'm hacking something together and can't directly edit the video tag code – Piroshki 19/6, 2017 at 2:47

Hey Benny for Mozilla. You need to add vendor prefixed css for all of them like "-moz-media-controls-play-button" . Thanks – Foran 19/6, 2017 at 13:3

Tried adding the prefixes but it didn't work. Here is an updateed JSfiddle 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; }

– Piroshki 20/6, 2017 at 3: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 – Foran 21/6, 2017 at 19:54

Unfortunatley, that JS is not working in Firefox either. – Piroshki 22/6, 2017 at 6:26

It is working fine for me. Check this out jsfiddle.net/abidCharlotte49er/g1rsasa3 – Foran 23/6, 2017 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 :) – Piroshki 24/6, 2017 at 2:39

I found what seems to be a complete list: opensource.apple.com/source/WebCore/WebCore-7602.2.14.0.5/css/… – Blaubok 21/10, 2019 at 10:54

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. – Frederic 5/1, 2020 at 6:5

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! – Sciolism 9/1, 2022 at 1:5

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

video {
  pointer-events: none;
}

Szabadka answered 21/8, 2017 at 9:53 Comment(1)

This works except that the controls are shown on initial load. – Unclasp 25/1, 2019 at 1:53

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

Grishilda answered 23/2, 2021 at 5:28 Comment(1)

This will only works for Chrome browser, I want this for all browsers. – Jesusa 24/12, 2021 at 5:3

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

Inveigle answered 20/6, 2017 at 3:41 Comment(1)

Does not work on iOS in low power mode. – Apply 9/12, 2022 at 8:7

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

Alow answered 27/6, 2020 at 6:58 Comment(1)

I agree. The simplest solution is to never put the attribute to begin with. – Thyrsus 29/10, 2020 at 20:41

This method worked in my case.

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

Telemann answered 17/3, 2017 at 13:13 Comment(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); 
}

Standee answered 26/9, 2016 at 21:43 Comment(1)

– Standee 26/9, 2016 at 21:46

You just have to put 'playsinline' as attribute. If you put constrols="false" probably you still gonna get controls in mobile, and remember to put 'muted' also if you want the video to automatic plays.

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

Constantine answered 4/2 at 23:30 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags