Remove Play and Pause button for my background video-CodePudding

I tried all the solutions posted on here however nothing seems to work. The start and pause button appears on IOS devices and possibly android. Below is my html and CSS regarding the video.

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
    display: none;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

<section  id="top" data-section="section1">
      <video autoplay loop muted playsinline id="bg-video" controls="true" poster="assets/images/backvideo.png">
          <source src="assets/images/course-video.mp4" type="video/mp4"  />
          <source src="assets/images/course-video.webm" type="video/webm" />
          <source src="assets/images/course-video.ogv" type="video/ogv" />
      </video>

CodePudding user response：

<section  id="top" data-section="section1">

      <video autoplay loop muted playsinline id="bg-video" poster="assets/images/backvideo.png">
          <source src="assets/images/course-video.mp4" type="video/mp4"  />
          <source src="assets/images/course-video.webm" type="video/webm" />
          <source src="assets/images/course-video.ogv" type="video/ogv" />
      </video>