Refactor background video styles and enhance button placement in index.html

This commit is contained in:
vista-man
2025-04-09 14:07:06 +02:00
parent 8695286236
commit 61781e9e36
3 changed files with 18 additions and 26 deletions

View File

@@ -146,20 +146,6 @@ p {
margin-top: 20px; margin-top: 20px;
} }
.background-video {
max-width: 100%;
height: auto;
margin-top: 15px;
display: flex;
justify-content: center;
}
.background-video {
display: flex;
justify-content: center;
}
.item-container { .item-container {
display: flex; display: flex;

View File

@@ -7,6 +7,15 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<style>
.inhoud {
position: relative;
z-index: 1;
color: white;
text-align: center;
margin-top: 20px;
}
</style>
</head> </head>
<body> <body>
@@ -55,7 +64,9 @@
<source src="img/yt1z.net - Spik Span - Kampioene van de nach de11devande11de 2023 (720p) (1).mp4" type="video/mp4"> <source src="img/yt1z.net - Spik Span - Kampioene van de nach de11devande11de 2023 (720p) (1).mp4" type="video/mp4">
</video> </video>
<button onclick="toggleVideo()"></button> <div class="inhoud">
<button onclick="toggleVideo()">⏯ Video pauzeren/afspelen</button>
</div>
</body> </body>

View File

@@ -147,16 +147,11 @@ p {
} }
.background-video { .background-video {
max-width: 100%; position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: auto; height: auto;
margin-top: 15px; z-index: -1;
display: flex;
justify-content: center;
}
.background-video {
display: flex;
justify-content: center;
} }