CSS 背景画面いっぱいに動画を表示する
CSS 背景画面いっぱいに動画を表示する
画面いっぱいに動画を表示するには<video>タグをCSSで装飾することで実現できます。
<video>で表示した動画をCSSで横幅と縦幅を画面いっぱいまで指定して表示位置を調整します。キービジュアルでよく使われるような動画を背景の画面いっぱいに表示するデザインを実現できます。
特徴
・レスポンシブ対応
・Javascriptなし
・動画を天地中央表示
・オーバーレイあり
・テキスト天地中央表示
動画ファイルを使う
See the Pen
CSS – Hero Movie (Overlay＆Text) by kura (@kuranopen)
on CodePen.
自前の動画ファイルをアップロードして使う方法です。
特徴
- <video>タグを使用
- 表示速度は自サーバーに依存
HTML
<section class="hero">
<div class="video-box overlay">
<video class="video" muted autoplay loop playsinline>
<source src="http://nowte.net/public/movie.mp4" type="video/mp4">
</video>
</div>
<div class="text-box">
<h1>Hero Movie<br>Overlay Text</h1>
</div>
</section>
CSS
/* wrap */
.hero {
position: relative;
}
/* video */
.video-box {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* overlay */
.overlay::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: "";
background: rgba(0, 0, 0, 0.4);
}
/* text */
.text-box {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
h1 {
font-family: Roboto;
font-size: 60px;
font-weight: bold;
line-height: 1.2;
padding: 0 50px;
text-align: center;
color: #fff;
}
参考リファレンス
デザインを本で学びたい人向けの記事
初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選
デザイナーのUIメモ帳
レイアウト
- 1カラムレイアウト
- 2カラムレイアウト
- ヘッダー
- フッター
- CSS 要素を横一列に並べる方法
- CSS 要素を横一列に並べる方法
- 画像の横に文字を並べる
- ヘッダー固定
ヒーローエリア
- CSS 動画フルスクリーン
- CSS 画像フルスクリーン
- CSS 画像スライドショー
フォーム
- フォームステップ
- セレクトボックス
- ラジオボタン
- チェックボックス
- ラジオボタングループ
- 検索ボックス
画像
- CSS 画像を丸く切り抜く
- マウスオーバーで画像を拡大
テキスト
- 見出しに下線部を追加する
- 打ち消し線
- グラデーション色のテキスト
ナビゲーション
- パンくずリスト
- ページトップへ戻るボタン
- ページナビゲーション
コンテンツ
CSSデザインサンプル
- 縁取りテキスト
- 背景色付きテキスト
- テーブル
- ul 箇条書きリスト
- ol 数字付きリスト
モバイルサイト
Javascript
Google Map
Youtube
- Youtube埋め込み動画をフルスクリーンで表示する
お得ニュース
AmazonでApple Watchが5000円引き。ポイント3%付きのお得セール開催中
ゲーミングPCが5万円引き。マウスコンピューターのビッグサマーセール 第2弾が開催
