index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTMLに動画を埋め込む</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <video src="img/main.mp4" autoplay muted loop playsinline></video> </div><!-- /.wrapper --> <div class="text"> <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, voluptatem.</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore minus tempora blanditiis quasi facilis nobis esse magni exercitationem fugit, adipisci placeat sapiente quia? Earum inventore incidunt ea, totam fugit quos harum repellat quas ratione ex doloribus rerum mollitia eius, eligendi illum? Labore nobis vitae eligendi quod, explicabo quam, ut dicta enim neque consequuntur quos tenetur fugit necessitatibus officiis, officia atque! Debitis, adipisci cumque quisquam nemo eius officia placeat voluptates beatae rerum rem error atque est voluptate nulla? Est possimus nostrum ipsum numquam libero nisi explicabo quos, dignissimos delectus quam, asperiores quidem vel consectetur commodi enim dolorum dolore ullam odit. Iste!</p> </div><!-- /.text --> </body> </html>
style.css
@charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } .wrapper{ width: 100%; height: 100vh;/* 1画面分の高さを100で割った数値 */ margin: 0 auto; position: fixed; top: 0; left: 0; z-index: -1; } video{ object-fit: cover; width: 100%; height: 100%; } .text{ width: 40%; padding: 200px 40px; background-color: #ffffff87; font-family: "Kanit", sans-serif; } h1{ margin-bottom: 100px; font-size: 44px; } p{ line-height: 2; font-size: 24px; }
