Даний код написаний мовою HTML з елементами css
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Загальнонаціональна хвилина мовчання: 8:59</title>
<style>
display: none;
opacity: 0;
position: fixed;
top: 20px;
right: 20px;
width: 80vw; / 80% ширини екрана /
height: calc(80vw 9 / 16); / пропорції 16:9 */
background: transparent; / повністю прозорий фон /
z-index: 9999; / поверх усього /
border: none;
box-shadow: none;
pointer-events: auto;
transition: opacity 1s ease-in-out; / плавна поява і зникнення /
}
#player {
width: 100%;
height: 100%;
border: none;
background: transparent;
}
#message {
font-size: 20px;
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Загальнонаціональна хвилина мовчання о 8:59:24</h1>
<div id="message"></div>
<div id="player-popup">
<div id="player"></div>
</div>
<script>
// Початок о 8:59:24
const startHour = 8;
const startMinute = 59;
const startSecond = 24;
// Тривалість 3 хвилини 17 секунд
const durationSeconds = 3 * 60 + 17;
const startTime = startHour 3600 + startMinute 60 + startSecond;
const endTime = startTime + durationSeconds;
// Завантаження YouTube IFrame API
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let player;
let popup = null;
let visible = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: 'J8eVeH-XgqQ', // 🔹 заміни на своє відео
playerVars: {
rel: 0,
modestbranding: 1,
controls: 0,
showinfo: 0
},
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady() {
popup = document.getElementById('player-popup');
checkAccess();
setInterval(checkAccess, 1000);
}
function showPopup() {
if (!visible) {
popup.style.display = 'block';
setTimeout(() => {
popup.style.opacity = '1';
}, 10);
visible = true;
}
}
function hidePopup() {
if (visible) {
popup.style.opacity = '0';
setTimeout(() => {
popup.style.display = 'none';
}, 1000); // після fade-out
visible = false;
}
}
function checkAccess() {
const now = new Date();
const currentTime = now.getHours() 3600 + now.getMinutes() 60 + now.getSeconds();
const isAllowed = currentTime >= startTime && currentTime < endTime;
if (isAllowed) {
showPopup();
document.getElementById('message').textContent = '';
if (player && player.playVideo) player.playVideo();
} else {
hidePopup();
document.getElementById('message').textContent = 'Відео доступне з 8:59:24 до 9:02:41.';
if (player && player.pauseVideo) player.pauseVideo();
}
}
</script>
</body>
</html>