[PRACTICE] Video Background

在桌機使用瀏覽器(縮小視窗寬度後)觀看頁面不會出現水平捲軸，但手機的瀏覽器會。

即使已經在 body 設定 overflow-x: hidden; 也沒有作用。

解決方式是用一個 div(.wrapper) 把內容包起來，並在該 div 使用 overflow-x: hidden;

<div class="wrapper">
  <header class="header">
    <nav>
      ...
    </nav>

    <video autoplay loop muted>
      ...
    </video>

    <div class="video-overlay">
      ...
    </div>
  </header>

  <main>
    <div class="container">
      ...
    </div>
  </main>
</div>

GitHub
https://github.com/yuanhuang-tw/video-background

Demo
https://yuanhuang-tw.github.io/video-background/

[補充]
乃綠茶 > Front-End Developers Taiwan

前端踩雷編
HTML5 video 只要在屬性加上 playsinline, muted
原則上就可以在原地自動播放，不會滿版。(iOS, Android 皆是)
最近遇到部份同事、客戶的裝置無法自動播放。
第一時間一定就是查 iOS 版本，Safari 版本，寫各種測試，結果都無效。
結果同事查了才發現
iOS 在省電模式下，不會自動播放影片
Android Chrome 在減少數據用量模式下也是

參考連結：

• Create a Website With Video Background