How to Remove HTML5 Video Play button overlay on Mobile

SomeRandomDeveloper 0
Viewed 45

On my website i have a video.

enter image description here

I used to have it set to auto play, but decided instead to create custom play/pause buttons. This is all well and good, and everything works functionally on mobile and desktop.

However, now because i removed autoplay, aesthetically on mobile on some phones, i see this huge default "watermark" play button overlay across my video background. I can't hide the video element until my play button is clicked because i want the video background image to persist even when the video is paused("the clouds").

Other than having some dumb logic that shows the img of the video thumbnail that i toggle as well, how can i get rid of this default play button.

Fyi, here are the video tag and properties.

<div class="overlay-section">
  <div class="video-wrapper">
    <video
      id="life"
      class="life-bg"
      src="/videos/life.mp4"
      loop
      muted
      playsinline
    ></video>
  </div>
</div>

Edit:

Removing and adding the controls as suggested added another play button.

enter image description here

html5-video video javascript css html
1 Answers

Tried removing all controls and reinserting on mobile devices?

Example:

function removeControls() {
  var video = document.querySelector('video');
  video.removeAttribute('controls');
}

function addControlsMobile() {
  var video = document.querySelector('video');
  video.setAttribute('controls', 'controls');
}

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
  removeControls();
  addControlsMobile();
}
Tibic40
Related