How to Remove HTML5 Video Player Navigation Button

How to remove HTML5 video player navigation button

You can disabled controls via Javascript:

document.getElementById('video-player').controls = false

Or simply remove controls attribute:

<video id='video-player' autoplay="autoplay" loop preload="metadata">
    <source src="Video/1.MP4" type="video/mp4">
</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.

How to hide play button overlay on HTML5 video

Here you go: https://jsfiddle.net/ed9o52k5/3/

var bunnyVideo = document.getElementById("bVideo");

function playPause() {
  var el = document.getElementById("playButton");
  if (bunnyVideo.paused) {
    bunnyVideo.play();
    el.className ="";
  } else {

    bunnyVideo.pause();
    el.className = "playButton";
  }
}

bunnyVideo.addEventListener("click", playPause, false);

Hide native play button for video in google chrome

Took a bit of searching, but found it in the comments here and confirmed it works on Chrome for Android.

video::-webkit-media-controls-overlay-play-button {
  display: none;
}

Hide Native Android HTML5 Video Play Button in CSS

For anyone who comes across this question, an alternative solution to the native one is to simply not include android-webview-video-poster: in your Content Security Policy. This will block the image from ever loading in the first place. Not sure if this is considered a hackish solution, but it seems to work for me.

---

Related Topics