在動手編碼實現前，視頻作為網頁背景的有些問題我們要先考慮清楚：
- 並不是因為技術上可行你就可以任意使用：作為背景的視頻內容必須能增強頁面內容的感染力，而不是因為漂亮或技術上很酷就使用它。
- 作為背景的視頻應該設置為自動播放，而默認狀態下應該是關閉聲音；事實上，視頻里面最好不含聲音。(你可以在頁面上放置一個控制聲音的按鈕。)
- 背景視頻應該有個替代圖片，當瀏覽器不支持這種html5技術、視頻格式時用圖片替代。在等待背景視頻加載的過程中也應該使用背景圖片占位。而對於一些手機移動設備不支持視頻自動播放，也應該使用圖片替代。
- 視頻長度很重要：太短了會明顯感到重復播放(背景視頻通常情況是重復播放的)，太長就變成了情節敘事，如果這樣，這段視頻應該單獨放到頁面上播放。我建議視頻的長度應該是12-30秒之間。
- 帶寬是個大問題。視頻的體積應很小，盡量的壓縮。同時，它需要在不同尺寸設備上自動的適應屏幕大小。如果有可能，應該使用JavaScript控制對不同的屏幕大小加載不同分辨率的背景視頻。背景視頻最好小於5M，如果你小於500K，那是更好。
對上面說的這些情況心里要有數，下面我們來看看技術實現上的細節。
CSS代碼
使用HTML5里播放視頻的代碼方法視頻：
<video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video>
注意：這里擺放視頻格式的順序很重要，因為有些版本的谷歌瀏覽器里，如果.webm格式的視頻放在了其他視頻后面，視頻將無法播放。
我們使用視頻的第一幀圖像作為視頻的封面圖片，這樣，當背景視頻一旦加載完成，我們可以看到很流暢的從圖片過度到背景視頻播放。
讓視頻擴展到全屏的方法：
video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(polina.jpg) no-repeat; background-size: cover; }
一些老式的瀏覽器無法播放這種格式的視頻，但它們仍然識別<video>標記(除了IE8/6)。對於這些瀏覽器，我們使用了background-image來彌補它們的不支持，使用的圖片就是視頻的封面圖片。
你可能會發現，在手機設備上，<video>標記是無法擴展到全屏的，因為這些設備的屏幕長寬比限制了視頻的擴展。我在以后的文章里了會繼續探討這個問題。
視頻背景技術在 IE 8 上的問題
IE8不僅不能識別<video>標記，它對所有的HTML5標記都不能識別，這是一個問題，對於IE8，我們至少要讓替代的背景圖片能顯示出來。為了達到這個目的，我們需要兩件事情：一行JavaScript代碼，一個CSS條件判斷注釋語句。
<!--[if lt IE 9]> <script> document.createElement('video'); </script> <![endif]-->
在你的CSS代碼里做如下的聲明，讓IE知道<video>是一個block元素：
video { display: block; }
有了這句代碼，IE8至少能識別<video>標記，可以正確的顯示背景圖片。