メインビジュアルの背景を動画にする

自社のサイトリニューアルの際に、メインビジュアルで動画を流すことになったので、
html5のvideoタグと、再生を制御するjavascriptについて解説します。

■HTMLソース

■css

今回は、動画をフェードインさせる必要があったので、video要素の直前にカバー画像用のdivを作りました。
video自体をjQueryでフェードインさせると、処理が重たくなり再生がスムーズにされなかったので、
フェードイン効果はcss3で実装しています。

■javascript