(Sample)

以下は背景を動画で覆うときのソースコードです。

ポイントは、以下の2点です。

  • <video id="video" autoplay muted loop>...</video>: 実際の動画要素です。id="video"によってCSSスタイル内でこの要素を特定することができます。autoplayはページが読み込まれると自動的に再生を開始し、mutedは音声をミュートにします。loopは動画をループ再生します。
  • <source src="leaves.mp4" type="video/mp4">: 動画ファイルのソースを指定します。src属性に動画ファイルのパスを指定し、type属性に動画のMIMEタイプを指定します。
<!DOCTYPE html>
<html>

<head>
	<title>video.html</title>
	<style>
		/* ページ全体のスタイル */
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}

		/* 動画を表示する要素のスタイル */
		#video-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			overflow: hidden;
		}

		/* 動画のスタイル */
		#video {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			min-width: 100%;
			min-height: 100%;
		}

		.container {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			/* 画面の高さに合わせる場合 */
		}

		.center {
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="video-container">
		<video id="video" autoplay muted loop>
			<source src="leaves.mp4" type="video/mp4">
		</video>
	</div>
	<div class="container">
		<div class="center">
			<h1>Background Video Example</h1>
			<p>This is a web page with a background video.</p>
		</div>
	</div>
</body>

</html>

最後までお読みいただきありがとうございます。