背景に動画を使うサイトをよく見受けられるようになってきました。
どうやって作っているのか気になったので調査してみると、結構簡単に出来ることがわかったので、備忘録としてポストします。
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を設定し、背景の上に文字が乗るようにしています。
結果
背景を動画にするテスト
![]()
![]()
背景を動画にするテスト
lightning-bolt.xyz
例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; } |
結果
背景を動画にするテスト（伸縮）
![]()
![]()
背景を動画にするテスト（伸縮）
lightning-bolt.xyz
例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; } |
結果
背景を動画にするテスト（伸縮２）
![]()
![]()
背景を動画にするテスト（伸縮２）
lightning-bolt.xyz
ガチで background-size タグが使えれば、background-size: cover; 辺りできれいに画面いっぱいになってくれそうですが、そううまくはいかないようです。
しかしながら（多少手間ではありますが）メディアクエリーを活用して画面サイズに応じた設定ができれば、きれいに表示することはできそうな予感。
また時間を見つけて作ってみたいと思います。
background-size: cover; についてはこちらを参照。
【CSS3】background-size:cover;で背景全面を画像にする方法（IE8対応）
![]()
![]()
301 Moved Permanently
scene-live.com
無料動画
今回のデモを作るのに利用しました。
Sunset Time Lapse | Free HD Stock Video Footage – Videezy.com
![]()
![]()
Sunset Time Lapse | Free HD Stock Video Footage - Videezy.com
Free HD Stock Video Footage! - Videezy is a community of Videographers who download and share free HD stock video!
www.videezy.com
Sunset Time Lapse | Free HD Stock Video Footage – Videezy.com
![]()
![]()
Sunset Time Lapse | Free HD Stock Video Footage - Videezy.com
Free HD Stock Video Footage! - Videezy is a community of Videographers who download and share free HD stock video!
www.videezy.com
保存版！動画素材がダウンロードできるサイト17選｜ferret [フェレット]
![]()
![]()
保存版！無料で動画素材がダウンロードできるサイト17選
動画素材がダウンロードできるサイトを紹介します。フリー素材でも高品質な動画素材を提供しているサイトはたくさんあります。うまく活用して、動画のクオリティをアップしましょう。
ferret-plus.com
背景が動画になっているサイトの例
おまけ。
スマートウォッチTHE MISSION（ミッション）日本公式サイト
![]()
![]()
http://www.nixontokyojapan.com/themission/
www.nixontokyojapan.com
株式会社リ・クリエーション | オフィシャルサイト
![]()
![]()
株式会社リ・クリエーション | オフィシャルサイト
東京都渋谷区にある株式会社リ・クリエーションの公式サイトです。WEBサイトの制作やシステム、アプリケーション開発をしております。
re-creation.co.jp
Kalexiko – Web Design Birmingham & SEO Agency. Based in the Midlands
![]()
![]()
https://www.kalexiko.com/
www.kalexiko.com
