HTML5 videoタグで背景に動画を使ったページを作る方法
2019/12/14
背景に動画を使うサイトをよく見受けられるようになってきました。
どうやって作っているのか気になったので調査してみると、結構簡単に出来ることがわかったので、備忘録としてポストします。
HTML5のvideoタグで背景を動画にしてみる
例1. とりあえず背景を動画にしてみる
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>背景を動画にするテスト</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="toogie" /> <body> <video src="./mov/sunset_timelapse.mp4" autoplay loop muted></video> <p>動画を背景にする</p> </body> </html> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
body { background: #999; } video { position: fixed; right: 0; top: 0; z-index: 1; } p { color: #fff; font-size: 400%; margin: 50px; position: relative; z-index: 2; } |
videoタグに対し、右寄とz-indexを設定しているだけで、特に特殊なことはしていません。
pタグに対し、同様にz-indexを設定し、背景の上に文字が乗るようにしています。
結果
背景を動画にするテスト
https://lightning-bolt.xyz/video/index.html
https://lightning-bolt.xyz/video/index.html
例2. ウィンドウサイズに応じて伸縮させる
ウィンドウサイズに応じて背景動画を伸縮させるには、以下のように。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>背景を動画にするテスト</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="toogie" /> <body> <video src="./mov/sunset_timelapse.mp4" autoplay loop muted></video> </body> </html> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; height: auto; width: auto; z-index: 1; } p { color: #fff; font-size: 3em; margin: 50px; position: relative; z-index: 2; } |
結果
背景を動画にするテスト(伸縮)
https://lightning-bolt.xyz/video/index2.html
https://lightning-bolt.xyz/video/index2.html
例3. ブラウザ幅に動画を合わせてみる
例1, 例2 ともに、PCではまぁまぁ見栄えはしますが、スマホではイマイチよくわからないことになっています。
CSSをみて分かるように、横幅関係なく表示しているからですね。
動画の横幅を基準にしたい場合は、以下のように書けば良さそうです。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
video { position: fixed; right: 0; top: 0; height: auto; z-index: 1; max-width: 100%; } p { color: #fff; font-size: 2em; margin: 25px; position: relative; z-index: 2; } |
結果
背景を動画にするテスト(伸縮2)
https://lightning-bolt.xyz/video/index3.html
https://lightning-bolt.xyz/video/index3.html
ガチで background-size タグが使えれば、background-size: cover; 辺りできれいに画面いっぱいになってくれそうですが、そううまくはいかないようです。
しかしながら(多少手間ではありますが)メディアクエリーを活用して画面サイズに応じた設定ができれば、きれいに表示することはできそうな予感。
また時間を見つけて作ってみたいと思います。
background-size: cover; についてはこちらを参照。
【CSS3】background-size:cover;で背景全面を画像にする方法(IE8対応)
http://scene-live.com/page.php?page=71
http://scene-live.com/page.php?page=71
無料動画
今回のデモを作るのに利用しました。
Sunset Time Lapse | Free HD Stock Video Footage - Videezy.com
https://www.videezy.com/time-lapse/552-sunset-nature-time-lapse
https://www.videezy.com/time-lapse/552-sunset-nature-time-lapse
Sunset Time Lapse | Free HD Stock Video Footage - Videezy.com
https://www.videezy.com/time-lapse/552-sunset-nature-time-lapse
https://www.videezy.com/time-lapse/552-sunset-nature-time-lapse
保存版!動画素材がダウンロードできるサイト17選|ferret [フェレット]
https://ferret-plus.com/2619
https://ferret-plus.com/2619
背景が動画になっているサイトの例
おまけ。
スマートウォッチTHE MISSION(ミッション)日本公式サイト
http://www.nixontokyojapan.com/themission/
http://www.nixontokyojapan.com/themission/
株式会社リ・クリエーション | オフィシャルサイト
http://re-creation.co.jp/
http://re-creation.co.jp/
Kalexiko - Web Design Birmingham & SEO Agency. Based in the Midlands
https://www.kalexiko.com/
https://www.kalexiko.com/