HTML,CSS

HTML5 videoタグで背景に動画を使ったページを作る方法

2016/12/01

背景に動画を使うサイトをよく見受けられるようになってきました。
どうやって作っているのか気になったので調査してみると、結構簡単に出来ることがわかったので、備忘録としてポストします。

HTML5のvideoタグで背景を動画にしてみる

例1. とりあえず背景を動画にしてみる

HTML

CSS

videoタグに対し、右寄とz-indexを設定しているだけで、特に特殊なことはしていません。
pタグに対し、同様にz-indexを設定し、背景の上に文字が乗るようにしています。

結果

例2. ウィンドウサイズに応じて伸縮させる

ウィンドウサイズに応じて背景動画を伸縮させるには、以下のように。

HTML

CSS

結果

例3. ブラウザ幅に動画を合わせてみる

例1, 例2 ともに、PCではまぁまぁ見栄えはしますが、スマホではイマイチよくわからないことになっています。
CSSをみて分かるように、横幅関係なく表示しているからですね。
動画の横幅を基準にしたい場合は、以下のように書けば良さそうです。

CSS

結果

ガチで background-size タグが使えれば、background-size: cover; 辺りできれいに画面いっぱいになってくれそうですが、そううまくはいかないようです。

しかしながら(多少手間ではありますが)メディアクエリーを活用して画面サイズに応じた設定ができれば、きれいに表示することはできそうな予感。
また時間を見つけて作ってみたいと思います。

background-size: cover; についてはこちらを参照。

無料動画

今回のデモを作るのに利用しました。

背景が動画になっているサイトの例

おまけ。

-HTML,CSS
-, , , ,