Hello there! I'm diving into the world of HTML/CSS and Stack Overflow, so bear with me if I make any mistakes.
My current aim: I've managed to set up a video background for my HTML website. And now, I'm exploring how to place a second video overlay onto the background.
As I work on inserting the video, I'm facing an issue where it isn't centered below the 'Welcome to the Sea' heading. I've tried using a dl list with indentations to center it, but that doesn't seem to be working as intended.
Anyone out there who could offer some guidance?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title> Video Background </title>
</head>
<body>
<div class="section">
<dl>
<dt><h1> Welcome To The Sea </h1></dt>
<dd><video controls>
<source src="TLM2.mp4" type="video/mp4">
</video></dd>
</dl>
</div>
<div class="container">
<div class="color-overlay"></div>
<video id="video" autoplay loop muted width="100%">
<source src="TLM.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
https://i.sstatic.net/SM3uW.jpg
This is a snippet from my CSS file:
.section {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 1;
margin: 0 auto;
}