本篇要解決的問題
最近遇到頁面的第一屏是滿版影片當背景的設計稿，原本以為只是偶爾有的樣式，後來看到朋友做別的案子時也有一樣的設計，才想把這次寫滿版影片的方式給筆記起來。
在找網路範例時，搜尋到 10 個有 9 個是整個頁面只有一個螢幕大小，無法往下滑，因此大部份都把 <video> 的 position 設為 fixed。
但記得以前看過幾個頁面，都是後續還有內容的，影片只佔第一屏大小，可繼續再往下滑。本篇筆記的就是這種情形。
而實際做過的案子，更常遇到的是滿版背景圖，而非影片，就一併筆記下來。
滿版背景圖
滿版背景圖會用到的概念是 CSS 的 vh、background。
如果需要在背景圖上壓一層淡黑底讓文字可以看得清楚，就會再用到 position。
範例寫在 CodePen 上，可以直接看原始碼：
See the Pen fullscreen-image-background by sean (@sean-su) on CodePen.
vh（view height） 是單位值，想像把螢幕的可見範圍垂直切成 100 塊，一塊就是 1vh。
如果是橫的切成 100 塊的話，一塊就是 1vw（view width）。
背景圖的部份，background-size: cover;
cover 會讓圖片等比例縮放並撐滿整個區塊。所以不管是哪種比例大小的圖都可以拉大成滿版。
要注意的是，因為是等比例縮放，所以直立長方形的圖在電腦這種橫的長方形螢幕上，就一定會有部份被裁切掉。反過來說，橫的圖放到直式的手機螢幕上，也一定會部份被裁掉。
解決方式就是桌機、手機寫不同的背景圖。
淡黑底的部份，當外層的 div 是 position: relative 時，下一層的 div 只要寫以下樣式，就可以將這個 div 拉大到跟外層的 div 同大小：
.child-div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}本篇的範例直接用 ::before 當下一層。
滿版影音背景
這邊說明一下，本篇的滿版影音背景是用 <video> 的，無法用在像 Youtube、Vimeo 那樣的 <iframe> 上。
滿版的影音背景，會用到的概念是 position、vh、object-fit。
August 也在 CodePen 上寫了一個範例：
See the Pen fullscreen-video-background by sean (@sean-su) on CodePen.
vh 的作用跟滿版背景圖一樣，這段不再重寫。
object-fit，這是這次在寫滿版影音背景時才知道的，說明可參考 w3schools。
我們直接把它想像成像 background-size，一樣有 contain、cover，而當設為 cover 時，就跟 background-size 設成 cover 相同，會等比例縮放且填滿空間。
只需要確保 <video> 的長寬跟螢幕的長寬一樣，再設 video 的 object-fit 為 cover，就可以讓影音是滿版的。
August 的實作上，在 IE11、IE10，可以直接吃 object-fit，到了 IE9 就不行了，因此在 CodePen 的範例上有另外寫了遇到 IE 就要給另一個 class，讓 <video> 可以維持置中。
