利用影片來做背景動態效果

最近逛到未確認進行式動畫官網
看到背景是動態畫面，第一個直覺這是Flash
但右鍵不是!!!!
奇怪就算是HTML5播放影片右鍵應該可以控制影片

簡單看了一下原始碼
是用HTML5裡的Video來播放了，但怎麼沒辦法右鍵控制???
其實最外面的那一層**#headWrap**把Video擋住了

其實div還用滿多z-index圖層

目前搞不懂#headWrap的z-index:20
Video的z-index:40
#headWrap可以在Video上面

最後，找到z-index playground
雖然左邊英文看不懂orz，但是簡單玩了一下右邊圖層關係
某div裡的div的z-index跟外面div裡的z-index比較
會對照某div裡的div的z-index的parent div z-index去跟外面比較
而非div裡面的z-index
此說法可能有錯誤

所以未確認進行式動畫官網
#headWrap的z-index:20
雖然Video的z-index:40，但是外層的#visualWrap的z-index:10
所以#headWrap就在上面

雖然有找到CSS z-index 屬性的使用方法和層級樹的概念
但親身玩一下z-index playground才會比較清楚

話說看暗殺教室和未確認進行式官網的CSS寫法
感覺網頁設計師是用SASS寫出來的0.0
可惜目前CSS能力不足，可能沒辦法碰此部份orz