HTMLify
knhrp
Views: 11 | Author: amar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Countdown to Video</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #000;
color: #fff;
font-family: Arial, sans-serif;
}
#countdown {
font-size: 6rem;
margin-bottom: 20px;
}
#video-container {
display: none;
width: 80%;
max-width: 800px;
box-shadow: 0 0 20px rgba(255,255,255,0.4);
border-radius: 8px;
overflow: hidden;
}
iframe {
width: 100%;
height: 450px;
border: none;
}
button {
margin-top: 10px;
padding: 10px 20px;
font-size: 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
background: #1e90ff;
color: #fff;
}
button:hover {
background: #63b3ed;
}
</style>
</head>
<body>
<div id="countdown">3</div>
<button id="skip">Skip Countdown</button>
<div id="video-container">
<iframe id="youtubeVideo"
src="https://www.youtube.com/embed/sTaEwwHOzjc?autoplay=1"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
<script>
const countdownEl = document.getElementById('countdown');
const videoContainer = document.getElementById('video-container');
const skipButton = document.getElementById('skip');
let count = 3;
let timer;
function startCountdown() {
timer = setInterval(() => {
count--;
if (count > 0) {
countdownEl.textContent = count;
} else {
endCountdown();
}
}, 1000);
}
function endCountdown() {
clearInterval(timer);
countdownEl.style.display = 'none';
skipButton.style.display = 'none';
videoContainer.style.display = 'block';
}
skipButton.addEventListener('click', endCountdown);
startCountdown();
</script>
</body>
</html>