現在好多客戶都很喜歡首頁放一個大大的短影片區塊
希望呈現上顯示單純影片+靜音+自動播放
爬了很多資料整理出完美解決方案，筆記一下方法
避免下次要用時又要重新整理 ^_^

Ｈtml：

<div class="video">
   <video autoplay muted playsinline loop>
      <source src="/video.mp4" type="video/mp4">
      Your browser does not support the video tag.
   </video>
</div>

屬性
autoplay：自動播放
muted：預設靜音
playsinline：線上播放 (加這個手機版才可正常自動播放)
loop：循環播放
ps. 如果只有加了 autoplay 與 loop 在電腦版，有可能不會自動播放，必須加入 muted 後，才可正常自動播放。

CSS：

.video { background-color: #222; }
.video video {
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   object-fit: fill;
   opacity: .8;
}   
/*隱藏所有控制元件*/
section.video video::-webkit-media-controls-enclosure {
   display: none !important;
}

其他單一屬性隱藏

/*播放按鈕*/
video::-webkit-media-controls-play-button,
/*播放時間軸*/
video::-webkit-media-controls-timeline,
/*全螢幕按鈕*/
video::-webkit-media-controls-fullscreen-button,
/*當前時間*/
video::-webkit-media-controls-current-time-display,
/*剩餘時間*/
video::-webkit-media-controls-time-remaining-display,
/*喇叭按鈕*/
video::-webkit-media-controls-mute-button,
/*音量按鈕*/
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-toggle-closed-captions-button {
   display: none !important;
}