🎉
🚀
✨
🌟
😄
💫
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
@keyframes sparkle {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.5); }
100% { opacity: 1; transform: scale(1); }
}
.emoji {
animation: float 4s ease-in-out infinite;
position: absolute;
font-size: 24px;
}
.sparkle {
animation: sparkle 2s ease-in-out infinite;
position: absolute;
font-size: 20px;
opacity: 0;
}
</style>
</head>
<body>
<div style="position: relative; width: 400px; height: 400px; background-color: black; overflow: hidden; margin: auto;">
<input type="file" id="videoInput" accept="video/*" style="position: absolute; top: 10px; left: 10px; z-index: 2;">
<video id="videoPlayer" style="position: absolute; top: 50%; left: 50%; width: 320px; height: 180px; transform: translate(-50%, -50%); display: none; cursor: pointer;" muted>
Your browser does not support the video tag.
</video>
<div id="emojis">
<div class="emoji" style="top: 20px; left: 50%;">🎉</div>
<div class="emoji" style="top: 100px; left: 20px;">🚀</div>
<div class="emoji" style="top: 150px; left: 300px;">✨</div>
<div class="emoji" style="top: 300px; left: 100px;">🌟</div>
<div class="emoji" style="top: 250px; left: 350px;">😄</div>
</div>
<div id="sparkle" class="sparkle">💫</div>
</div>
<script>
const videoInput = document.getElementById('videoInput');
const videoPlayer = document.getElementById('videoPlayer');
const sparkle = document.getElementById('sparkle');
videoInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
videoPlayer.src = url;
videoPlayer.style.display = 'block';
}
});
videoPlayer.addEventListener('mouseenter', function() {
videoPlayer.play();
videoPlayer.muted = false;
sparkle.style.top = (videoPlayer.offsetTop - 30) + 'px';
sparkle.style.left = (videoPlayer.offsetLeft + videoPlayer.offsetWidth / 2) + 'px';
sparkle.style.opacity = 1;
});
videoPlayer.addEventListener('mouseleave', function() {
videoPlayer.pause();
videoPlayer.muted = true;
sparkle.style.opacity = 0;
});
// Click animation
videoPlayer.addEventListener('click', function() {
const clickEmoji = document.createElement('div');
clickEmoji.className = 'sparkle';
clickEmoji.style.top = (Math.random() * 380) + 'px';
clickEmoji.style.left = (Math.random() * 380) + 'px';
clickEmoji.textContent = '✨';
document.body.appendChild(clickEmoji);
setTimeout(() => {
clickEmoji.remove();
}, 2000);
});
</script>
</body>
</html>
```