Project Compassion 2026 - Launch - Catholic Education Wilcannia-Forbes

/* Make the video container own the rounding and clip the iframe */ .player{ aspect-ratio:16/9; width:100%; background:#000; border-radius: var(–radius); /* NEW: round the actual video box */ overflow: hidden; /* NEW: clip the iframe corners */ } /* Ensure the iframe truly fills the box and doesn’t leave a baseline gap */ .player iframe{ display:block; /* removes inline baseline gap */ width:100%; height:100%; border:0; } Project Compassion 2026 Launch – Livestream :root{ –brand1:#660000; /* deep maroon accent from slide */ –brand2:#8C0255; /* secondary accent from slide */ –text:#1e1e1e; –muted:#6b7280; –bg:#ffffff; –card:#f7f7f8; –radius:14px; –shadow:0 8px 28px rgba(0,0,0,.08); } *{box-sizing:border-box} body{ margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, “Apple Color Emoji”,”Segoe UI Emoji”; color:var(–text); background:var(–bg); } header{ padding: clamp(24px, 5vw, 48px) 20px 8px; text-align:center; background: linear-gradient(180deg, rgba(140,2,85,0.06), transparent); } .eyebrow{letter-spacing:.12em; text-transform:uppercase; color:var(–brand2); font-weight:700; font-size:.86rem} h1{margin:.35em 0 .2em; font-size:clamp(1.6rem, 3.6vw, 2.6rem); line-height:1.15} .sub{color:var(–muted); max-width:70ch; margin:0 auto} .wrap{max-width:1050px; margin:0 auto; padding:24px 20px 60px} .grid{display:grid; gap:22px; grid-template-columns: 1.25fr .85fr} @media (max-width: 980px){ .grid{grid-template-columns:1fr} } .card{background:var(–card); border-radius:var(–radius); box-shadow:var(–shadow); overflow:hidden} .player{aspect-ratio:16/9; width:100%; background:#000} .meta{display:grid; gap:14px; padding:22px} .row{display:flex; gap:12px; align-items:flex-start} .row .label{min-width:78px; font-weight:700; color:var(–text)} .row .value{color:#111} .btn{ display:inline-flex; align-items:center; gap:10px; background:var(–brand1); color:#fff; text-decoration:none; font-weight:700; padding:12px 16px; border-radius:10px; box-shadow:0 4px 14px rgba(102,0,0,.25); } .btn:hover{filter:brightness(1.05)} .countdown{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:var(–brand1); font-weight:800; padding:16px 20px; background:#fff; border-radius:12px; box-shadow:var(–shadow); } .badge{background:var(–brand2); color:#fff; padding:4px 10px; border-radius:999px; font-size:.8rem; font-weight:700} footer{color:var(–muted); text-align:center; padding:40px 20px} .sr-only{position:absolute; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden; white-space:nowrap}

// ====== CONFIG ====== // Paste full YouTube URL or just the video ID: const YT_INPUT = “https://youtu.be/GkyOeijb4mY”; // Event start time (local timezone for viewers in NSW). // Month is 0-based in JS (0=Jan, 1=Feb), so February is 1. const EVENT_START = new Date(2026, 1, 20, 10, 0, 0); // 20 Feb 2026, 10:00 // ====== UTIL: Extract video ID if a full URL was provided ====== function extractYouTubeId(input){ if(!input) return null; // ID pattern const idMatch = input.match(/^[a-zA-Z0-9_-]{11}$/); if(idMatch) return idMatch[0]; try{ const u = new URL(input); if(u.hostname.includes(“youtube.com”)){ return u.searchParams.get(“v”); } if(u.hostname.includes(“youtu.be”)){ return u.pathname.slice(1); } }catch(e){} return null; } // ====== Build iframe ====== function buildPlayer(containerId, videoId){ const el = document.getElementById(containerId); if(!el || !videoId) return; const iframe = document.createElement(“iframe”); iframe.width = “100%”; iframe.height = “100%”; iframe.title = “YouTube livestream”; iframe.allow = “accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share”; iframe.allowFullscreen = true; iframe.setAttribute(“referrerpolicy”, “strict-origin-when-cross-origin”); iframe.src = `https://www.youtube.com/embed/${videoId}?rel=0&modestbranding=1&playsinline=1`; el.appendChild(iframe); } // ====== Countdown ====== function startCountdown(){ const d = document.getElementById(“tdd”); const h = document.getElementById(“tdh”); const m = document.getElementById(“tdm”); const s = document.getElementById(“tds”); function tick(){ const now = new Date(); const diff = EVENT_START – now; if(diff <= 0){ d.textContent = "0d"; h.textContent = "00h"; m.textContent = "00m"; s.textContent = "00s"; return; // event started } const sec = Math.floor(diff/1000)%60; const min = Math.floor(diff/1000/60)%60; const hr = Math.floor(diff/1000/60/60)%24; const day = Math.floor(diff/1000/60/60/24); d.textContent = `${day}d`; h.textContent = `${String(hr).padStart(2,"0")}h`; m.textContent = `${String(min).padStart(2,"0")}m`; s.textContent = `${String(sec).padStart(2,"0")}s`; } tick(); setInterval(tick, 1000); } // ====== Init ====== (function(){ const vid = extractYouTubeId(YT_INPUT); if(!vid){ console.warn("Please set YOUTUBE_VIDEO_ID_OR_URL to your livestream link or 11‑char video ID."); }else{ buildPlayer("player", vid); } startCountdown(); })();