動画
-画面全体に背景動画を流す-
See the Pen 6-3-1 画面全体に背景動画を流す by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内の表示を確かめてね!
動きを実現する仕組み
HTML のvideo タグを使い、CSS で画面いっぱいに拡大して背景動画を流す。
video タグに対応していないブラウザには代替画像を用意して表示する。
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/6-3-1.css"> </head>
- video ファイルと代替え画像を用意します。video ファイルは各ブラウザに対応するため .mp4、.ogv、.webmの3 種類を用意します。
※動画は、ユーザーのページの読み込み時間や再生時の挙動を削減するため4MB 以下を目安に制作しましょう。
※無料の高画質video 素材は Pixabay (https://pixabay.com/)などのサービスを活用しましょう。 - body内の背景動画を表示させたい場所にHTMLを記載します。
<header id="header"> <h1>Title</h1> <div id="video-area"> <video id="video" poster="img/movie.jpg" webkit-playsinline playsinline muted autoplay loop> <!-- poster:動画ファイルが利用できない環境で代替表示される画像 webkit-playsinline:iOS 9までのSafari用インライン再生指定 playsinline:iOS 10以降のSafari用インライン再生指定 muted:音声をミュートさせる autoplay:動画を自動再生させる loop:動画をループさせる controls:コントロールバーを表示する --> <source src="video/movie.mp4" type="video/mp4"> <source src="video/movie.ogv" type="video/ogv"> <source src="video/movie.webm" type="video/webm"> <p>動画を再生できる環境ではありません。</p> </video> <!--/video-area--></div> </header>
自作のCSS内の書き方
/*========= 背景動画設定のCSS ===============*/
/*header設定*/
#header{
position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
height: 100vh;/*高さを全画面にあわせる*/
}
#video-area{
position: fixed;
z-index: -1;/*最背面に設定*/
top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
}
#video {
/*天地中央配置*/
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*縦横幅指定*/
width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9= 177.77% */
height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
min-height: 100%;
min-width: 100%;
}
/*見出し設定*/
h1{
/*要素の配置*/
position:absolute;
/*要素を天地中央寄せ*/
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
/*見た目の調整*/
color:#fff;
text-shadow: 0 0 15px #666;
}
この技術を使ったサンプルサイト
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!