Remove Play and Pause button for my background video

Issue

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 class="section main-banner" 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>

Solution

<section class="section main-banner" 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>

Answered By - HackNetAyush