初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTML CSS バックグラウンドに動画を使用する

最近動画がバックグラウンドに流れていてなおかつコンテンツを
見せるサイトが多々あるかと思います。

その作り方を記述します。

HTML5のvideoタグを使用します。

動画を用意します。
下記が無料でクオリティーが高い動画が
ダウンロードできます。

poster属性はmovieが読み込まれるまでの間に
表示しておく画像です。mazwai.com


videoタグの中に入力する時に
controls か autoplayを入力しましょう。
文字通り再生をコントロールするか
読み込みと同時に自動で再生の選択です。
またautoplay と loop は通常はセットで記述します。

なおスマートフォンで見る場合にhはautoplayが効かないので注意しましょう。

CSSの注意点は画像はbackgroundでは記述できますが
動画は記述出来ませんのでこちらも注意が必要です。
f:id:bellsmarket:20150508044307p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猫の動画</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<video id="bgvid" autoplay loop>
<source src="img/CatsWorld.mp4" type="video/mp4">
<source src="img/CatsWorld.webm" type="video/webm">
</video>
<div id="container">
	<div class="overlay">
		<h1>動画を背景にする</h1>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		
〜〜〜〜〜〜〜〜〜省略〜〜〜〜〜〜〜〜〜

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

</p>
	</div><!--overlay-->
		<div class="overlay_right">
		<h1>動画を背景にする</h1>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		
〜〜〜〜〜〜〜〜〜省略〜〜〜〜〜〜〜〜〜

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

</p>
	</div><!--overlay-->
</div><!--container-->
</body>
</html>
@charset "UTF-8";
body, div, h1, p {
	padding:0;
	margin: 0;
}
video#bgvid {
	position:fixed;
	left: 0;
	top:0;
	min-width:100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background:url(../img/cat.png) no-repeat;
	background-size:cover;
	display:block;/*IE8以下対応のの記述*/
}
#container {
	width:100%;
	height:100%;
	overflow:hidden;
		background:rgba(0,0 ,0 ,0.2);

}
.overlay {
	background:rgba(0,134,171,0.2);
	color:#FFF;
	margin:40px;
	padding:20px;
	width:15%;
	float:left;
	border-radius:50px;
}

.overlay_right {
	background:rgba(134,0,171,0.2);
	color:#FFF;
	margin:40px;
	padding:20px;
	width:15%;
	float:right;
	border-radius:50px;
}
topへ戻る