背景を動画で覆いたい
山崎講師以下は背景を動画で覆うときのソースコードです。
ポイントは、以下の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>