做一個影片背景的網頁吧

今天會走ㄉ步驟有：

• 先到 Coverr 下載自己喜歡的短片 / 或自己的影片等
• 在 Google font 選自己喜歡的字體
• 打開 VSCode 然後 複製貼上 (欸不是喇

Html 架構：

<div class="wrap">
  <div class="banner">
    <video autoplay muted loop>
      <source src="https://storage.coverr.co/videos/coverr-italian-old-city-1570370740593?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTg1NjM4MTMxfQ.O0oXifvIX_nFLO3JzgH2GTW3JNCokuMvCzdcsesGj4g" type="video/mp4">
    </video>
    <h2>Hello</h2>
  </div>
</div>

video 有一些屬性。
像這次用到 autoplay muted loop

autoplay 係指影片就緒後，會自動播放。
muted 係指載入的影片靜音
loop 係指重複播放音訊或影片

這裡要注意一點，如果只設定 autoplay 的話，當網頁載入時並不會自動播放！
一定要加上 muted 才會自動播放。

也就是說影片在 靜音 的情況下才會自動播放。

Css 部分：

/* Reset CSS */
*{
  margin:0;
  padding:0;
  /* Google font 字體 */
  font-family: 'Poppins', sans-serif;
}
.banner{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items:center;
}
.banner video{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  object-fit: cover;
}
.banner h2{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  font-size: 30vw;
  text-align: center;
  line-height:100vh;
   /* 字全大寫 */
  text-transform:uppercase;
  background-color: #fff;
  mix-blend-mode: screen;
}

object-fit: cover; 就像 background-size: cover 一樣，兩者差異在前者可以用在 img 上而 img 有可以設定 alt="" 可提高 SEO 搜尋引擎；但 background-size 就沒有辦法惹 ><

這裡要特別提 mix-blend-mode: screen; 根本就是本次的精華 R。
他有著設計軟體 (PS) 才能做到的圖層混合效果。
像這次就是在影片上壓上 h2 標籤，讓他蓋過 video ，再使用 mix-blend-mode: screen; 語法讓他濾色

線上：https://codepen.io/yuicheng1006/pen/RwPvzrW?editors=1100

參考：
https://www.youtube.com/watch?v=S1LyYnyqRRs
https://dometi.com.tw/blog/html5-video-autoplay/
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video