HTML5 Video Completely Hide Controls

Question

How Could I completely hide HTML5 video controls    lt video width  300  height  200  controls  false  autoplay  autoplay  gt   lt source src  video supercoolvideo mp4  type  video mp4    gt   lt  video gt     false didn t work -- how is this done   Cheers

User · Answer

lt video width  quot 320 quot  height  quot 240 quot  autoplay  quot autoplay quot  gt     lt source src  quot movie mp4 quot  type  quot video mp4 quot  gt     lt source src  quot movie ogg quot  type  quot video ogg quot  gt    Your browser does not support the video tag   lt  video gt

User · Answer

A simple solution is     just to ignore user interactions  -   video     pointer-events  none

User · Answer

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

User · Answer

You could hide controls using CSS Pseudo Selectors like  Demo  https   jsfiddle net g1rsasa3   x000D   x000D    For Firefox we have to handle it in JavaScript  x000D  var vids      video     x000D    each vids  function    x000D         this controls   false   x000D       x000D    Loop though all Video tags and set Controls as false x000D   x000D     video   click function     x000D      console log this    x000D    if  this paused    x000D      this play    x000D      else   x000D      this pause    x000D      x000D      x000D  video  -webkit-media-controls   x000D    display  none  x000D    x000D   x000D     Could Use thise as well for Individual Controls    x000D  video  -webkit-media-controls-play-button    x000D   x000D  video  -webkit-media-controls-volume-slider    x000D   x000D  video  -webkit-media-controls-mute-button    x000D   x000D  video  -webkit-media-controls-timeline    x000D   x000D  video  -webkit-media-controls-current-time-display    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 1 jquery min js  gt  lt  script gt  x000D   lt  -- Hiding HTML5 Video Controls using CSS Pseudo selectors -- gt  x000D   x000D   lt video width  800  autoplay controls  false  gt  x000D     lt source src  http   clips vorwaerts-gmbh de VfE html5 mp4  type  video mp4  gt  x000D   lt  video gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

This method worked in my case   video getElementsByTagName  video    function removeControls video     video removeAttribute  controls      window onload removeControls video

User · Answer

Like this    lt video width  300  height  200  autoplay  autoplay  gt     lt source src  video supercoolvideo mp4  type  video mp4    gt   lt  video gt    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

[html] HTML5 Video // Completely Hide Controls

Examples related to html

Examples related to video