Webサイトの背景に動画を設定したい時の覚え書き

スクリーンショット 2013-12-28 14.19.53

最近良く見かける、Webサイトの背景に動画を設定したい場合の記述について少し調べたので覚え書き。

 

使われているサイト例

AirIntern | いろんな仕事をのぞいてみよう。
Interactive Film いつも可愛い – キリンジ | 蓮佛美沙子
Web制作会社 | 株式会社ネットフォレスト | 横浜市

 

作ったデモサイト

こんな感じです。
 

html

こちらはvideoタグで動画を指定。

<video src="images/laos.MOV" autoplay loop "></video>

プロパティのautoplayは自動再生、loopは繰り返し再生の指定です。
※loopの後ろにスペースがいります。

 

css

cssは以下のように記載します。

		*	{
			margin:0;
			padding:0;
		}
		video{
			position: fixed;
			min-width: 100%;
			min-height: 100%;
			top:0;
			z-index: 1;
		}
		h1{
			font-family: serif;
			color: #ff0;
			font-size:200%;
			position: absolute;
			top: 50%;
			left: 40%;
			z-index: 2;
		}

動画を背景全面に指定するには、videoタグの設定は下記のように指定します。

		video{
			position: fixed;
			min-width: 100%;
			min-height: 100%;
			top:0;
			z-index: 1;
		}

また、動画背景上にコンテンツを重ねて中央に寄せるために、h1タグのpositionをabsoluteにして、topとleftを指定し、videoタグとともにz-indexを指定しています。

 

以上

Categorized: HTML5