<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🎉 Cringe Birthday Wishes 🎂</title>
<style>
/* === Page Styles === */
body {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(135deg, #FFC1CC, #FFEE93);
font-family: 'Comic Sans MS', cursive, sans-serif;
color: #fff;
text-align: center;
}
/* Blinking “HAPPY BIRTHDAY” */
@keyframes blink {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
h1 {
font-size: 4rem;
margin-top: 2rem;
animation: blink 1.5s infinite;
text-shadow: 2px 2px #FF69B4;
}
/* Video container (16:9 aspect ratio) */
.video-container {
position: relative;
margin: 2rem auto;
width: 80%;
max-width: 800px;
height: 0;
padding-bottom: 56.25%; /* This forces a 16:9 ratio */
border: 10px solid #FFD700;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
overflow: hidden;
background: #000;
}
/* Make the <video> fill the entire rectangle and "cover" or "contain" the frame */
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 'cover' fills and crops; use 'contain' to fit with black bars */
}
/* Balloons */
.balloon {
position: absolute;
bottom: -150px;
width: 50px;
height: 70px;
background-color: #FF69B4;
border-radius: 0 0 50% 50%;
opacity: 0.8;
}
.balloon:before {
content: '';
position: absolute;
top: -10px;
left: 50%;
width: 14px;
height: 20px;
background-color: inherit;
border-radius: 50% 50% 0 0;
transform: translateX(-50%);
}
.string {
position: absolute;
bottom: -220px;
left: 50%;
width: 2px;
height: 150px;
background-color: #333;
}
@keyframes floatUp {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-120vh) rotate(360deg); }
}
/* Confetti */
.confetti {
position: absolute;
width: 8px;
height: 8px;
opacity: 0.8;
animation: fall linear infinite;
}
@keyframes fall {
0% { transform: translateY(-10vh) rotate(0deg); }
100% { transform: translateY(110vh) rotate(720deg); }
}
</style>
</head>
<body>
<h1>🎂 HAPPY BIRTHDAY!!! 🎉</h1>
<!-- ================= Video Container ================= -->
<div class="video-container">
<!--
1) Use your MP4 URL as the `src`.
2) Remove `muted` so you can hear sound.
3) Add `controls` so the user can pause/play/volume.
4) Use `object-fit: cover;` (in CSS) so it fills the box.
Change to `object-fit: contain;` if you’d rather see the
entire video with letterboxing.
-->
<video
src="https://htmlify.artizote.com/amar/videoplayback%20(1).mp4"
autoplay
loop
controls
></video>
</div>
<!-- ================= Balloons & Confetti ================= -->
<script>
const colors = ["#FF5757", "#FFB347", "#FF69B4", "#87CEEB", "#32CD32", "#FFD700"];
// Generate 12 random balloons
for (let i = 0; i < 12; i++) {
const balloon = document.createElement("div");
balloon.classList.add("balloon");
const size = Math.random() * 30 + 40; // 40px–70px
balloon.style.width = size + "px";
balloon.style.height = size * 1.2 + "px";
balloon.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
balloon.style.left = Math.random() * 95 + "vw";
// Vertical float animation (5s–10s)
const duration = Math.random() * 5 + 5;
balloon.style.animation = `floatUp ${duration}s ease-in infinite`;
// Add string beneath each balloon
const string = document.createElement("div");
string.classList.add("string");
string.style.height = size * 2 + "px";
string.style.bottom = "-" + (size * 2) + "px";
string.style.left = "50%";
balloon.appendChild(string);
document.body.appendChild(balloon);
}
// Create confetti pieces continuously
function createConfettiPiece() {
const confetti = document.createElement("div");
confetti.classList.add("confetti");
const size = Math.random() * 6 + 4; // 4px–10px
confetti.style.width = size + "px";
confetti.style.height = size + "px";
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.left = Math.random() * 100 + "vw";
const duration = Math.random() * 3 + 2; // 2s–5s
confetti.style.animationDuration = duration + "s";
confetti.style.animationDelay = Math.random() * 2 + "s";
document.body.appendChild(confetti);
// Remove after the animation ends
setTimeout(() => confetti.remove(), (duration + 2) * 1000);
}
setInterval(createConfettiPiece, 200);
</script>
</body>
</html>