再生ボタンを非表示にしたい

Question

videoタグの再生ボタンを非表示にしたいです。

【現状】
背景動画を設置したのですが低電力モードに設定していると再生されないので代わりに背景画像を表示させているのですが、再生ボタンが表示されて見栄えが悪くなってしまいます。

・低電力モード時 ※↓画像(再生ボタンが表示)

・低電力モード解除時　※↓動画(自動再生します)

【試したこと】
１.ググってみたら、videoタグに「controls」を外すと再生ボタンは表示されない。という記事を見て試したのですが、結果は変わらずの状態です

２.safariでソースコードをみたらhtmlに「シャドウコンテンツ(ユーザーエージェント)」というのがあり開いてみたらソースコード上で再生ボタンを編集できたので実際にcssを書いたのですが反映はされませんでした。

【質問】
背景画像が表示される際に再生ボタンを非表示にする方法を教えてください。

・html

<video class="video" poster="img/bg_img.jpg" autoplay muted loop playsinline>
  <source src="video/bg_video.mp4" type="video/mp4">
  <source src="video/bg_video.ogv" type="video/ogv">
  <source src="video/bg_video.webm" type="video/webm">
</video>

・css

.video{
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

Answer 1

こちら再生ボタンの非表示のみ可能（低電力モード時は再生されません）

シャドウコンテンツは::port()でCSSで編集が可能みたいですが、今回はHTMLとJavascriptのみで完結できます。

①HTML記述内のvideoのプロパティ属性にcontrolsを追加
②ブラウザ（Chromeとsafari）を判別して、動作を処理させる

<video class="video" poster="img/bg_img.jpg" controls autoplay muted loop playsinline>
  <source src="video/bg_video.mp4" type="video/mp4">
  <source src="video/bg_video.ogv" type="video/ogv">
  <source src="video/bg_video.webm" type="video/webm">
</video>

<script>
		const agent = window.navigator.userAgent.toLowerCase()
		if (agent.indexOf("chrome") != -1) {
		let video = document.getElementById('video');
		video.play(); //自動再生
		} else if (agent.indexOf("safari") != -1) {
		const movie = document.getElementById("video");
		movie.controls = false;  //（再生ボタン）controlsの非表示
		}
</script>

controlsの属性値は、true（表示）、false（非表示）の二種類です。