On Demand \u2014 Past Services<\/title>\r\n\r\n<style>\r\n\r\n :root{\r\n --navy:#1c2b45;\r\n --navy-deep:#16223a;\r\n --panel:#22324f;\r\n --gold:#c9a84c;\r\n --line:#34456a;\r\n --muted:#9aa6bd;\r\n }\r\n\r\n *{\r\n box-sizing:border-box;\r\n margin:0;\r\n padding:0;\r\n }\r\n\r\n body{\r\n background:var(--navy);\r\n font-family:\"Helvetica Neue\",Arial,sans-serif;\r\n color:#fff;\r\n }\r\n\r\n .wrap{\r\n max-width:1080px;\r\n margin:0 auto;\r\n }\r\n\r\n .eyebrow{\r\n text-align:center;\r\n letter-spacing:.28em;\r\n text-transform:uppercase;\r\n font-size:13px;\r\n color:var(--gold);\r\n margin-bottom:12px;\r\n }\r\n\r\n h1{\r\n text-align:center;\r\n font-size:clamp(28px,4vw,42px);\r\n font-weight:700;\r\n margin-bottom:10px;\r\n }\r\n\r\n .sub{\r\n text-align:center;\r\n color:var(--muted);\r\n max-width:560px;\r\n margin:0 auto 40px;\r\n line-height:1.6;\r\n font-size:15px;\r\n }\r\n\r\n .layout{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:34px;\r\n align-items:start;\r\n }\r\n\r\n \/* =========================\r\n CALENDAR\r\n ========================= *\/\r\n\r\n .cal{\r\n background:var(--panel);\r\n border:1px solid var(--line);\r\n border-radius:14px;\r\n padding:22px;\r\n }\r\n\r\n .cal-head{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n margin-bottom:18px;\r\n }\r\n\r\n .cal-head h2{\r\n font-size:19px;\r\n font-weight:600;\r\n }\r\n\r\n .nav{\r\n display:flex;\r\n gap:8px;\r\n }\r\n\r\n .nav button{\r\n background:transparent;\r\n border:1px solid var(--line);\r\n color:#fff;\r\n width:34px;\r\n height:34px;\r\n border-radius:8px;\r\n cursor:pointer;\r\n font-size:16px;\r\n transition:.2s;\r\n }\r\n\r\n .nav button:hover{\r\n background:var(--gold);\r\n color:var(--navy);\r\n border-color:var(--gold);\r\n }\r\n\r\n .dow{\r\n display:grid;\r\n grid-template-columns:repeat(7,1fr);\r\n gap:6px;\r\n margin-bottom:8px;\r\n }\r\n\r\n .dow span{\r\n text-align:center;\r\n font-size:11px;\r\n letter-spacing:.08em;\r\n text-transform:uppercase;\r\n color:var(--muted);\r\n padding:4px 0;\r\n }\r\n\r\n .grid{\r\n display:grid;\r\n grid-template-columns:repeat(7,1fr);\r\n gap:6px;\r\n }\r\n\r\n .day{\r\n aspect-ratio:1;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n border-radius:8px;\r\n font-size:14px;\r\n color:#cdd5e4;\r\n position:relative;\r\n }\r\n\r\n .day.empty{\r\n visibility:hidden;\r\n }\r\n\r\n .day.has{\r\n cursor:pointer;\r\n background:rgba(201,168,76,.12);\r\n color:#fff;\r\n font-weight:600;\r\n border:1px solid rgba(201,168,76,.4);\r\n transition:.2s;\r\n }\r\n\r\n .day.has:hover{\r\n background:var(--gold);\r\n color:var(--navy);\r\n }\r\n\r\n .day.has::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:5px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:5px;\r\n height:5px;\r\n border-radius:50%;\r\n background:var(--gold);\r\n }\r\n\r\n .day.has.active{\r\n background:var(--gold);\r\n color:var(--navy);\r\n }\r\n\r\n .day.has.active::after{\r\n background:var(--navy);\r\n }\r\n\r\n .day.today{\r\n box-shadow:inset 0 0 0 1px var(--gold);\r\n }\r\n\r\n\r\n \/* =========================\r\n VIDEO PLAYER\r\n ========================= *\/\r\n\r\n .player{\r\n background:var(--panel);\r\n border:1px solid var(--line);\r\n border-radius:14px;\r\n padding:22px;\r\n min-height:380px;\r\n }\r\n\r\n .video{\r\n width:100%;\r\n aspect-ratio:16\/9;\r\n border-radius:10px;\r\n overflow:hidden;\r\n border:1px solid var(--line);\r\n background:#000;\r\n }\r\n\r\n .video iframe{\r\n width:100%;\r\n height:100%;\r\n border:none;\r\n display:block;\r\n }\r\n\r\n\r\n \/* =========================\r\n EMPTY STATE\r\n ========================= *\/\r\n\r\n .empty-state{\r\n height:100%;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n text-align:center;\r\n color:var(--muted);\r\n padding:40px 20px;\r\n min-height:340px;\r\n }\r\n\r\n .empty-state .ico{\r\n font-size:40px;\r\n margin-bottom:14px;\r\n opacity:.5;\r\n }\r\n\r\n\r\n \/* =========================\r\n MOBILE\r\n ========================= *\/\r\n\r\n @media(max-width:760px){\r\n\r\n .wrap{\r\n width:100%;\r\n padding:0 15px;\r\n }\r\n\r\n .layout{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n .cal{\r\n padding:18px;\r\n }\r\n\r\n .player{\r\n padding:15px;\r\n }\r\n\r\n .sub{\r\n padding:0 10px;\r\n }\r\n\r\n }\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n<div class=\"wrap\">\r\n\r\n \r\n\r\n <div class=\"eyebrow\">\r\n watch anytime\r\n <\/div>\r\n\r\n <h1>\r\n On Demand\r\n <\/h1>\r\n\r\n <p class=\"sub\">\r\n Catch up on past services. Pick a date with a service recording, and it opens right here \u2014 no endless scrolling.\r\n <\/p>\r\n\r\n\r\n <div class=\"layout\">\r\n\r\n\r\n \r\n\r\n <div class=\"cal\">\r\n\r\n <div class=\"cal-head\">\r\n\r\n <h2 id=\"month-label\">\r\n June 2026\r\n <\/h2>\r\n\r\n <div class=\"nav\">\r\n\r\n <button id=\"prev\" aria-label=\"Previous month\">\r\n \u2039\r\n <\/button>\r\n\r\n <button id=\"next\" aria-label=\"Next month\">\r\n \u203a\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"dow\">\r\n\r\n <span>Sun<\/span>\r\n <span>Mon<\/span>\r\n <span>Tue<\/span>\r\n <span>Wed<\/span>\r\n <span>Thu<\/span>\r\n <span>Fri<\/span>\r\n <span>Sat<\/span>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"grid\"\r\n id=\"grid\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"player\"\r\n id=\"player\">\r\n\r\n <div class=\"empty-state\">\r\n\r\n <div class=\"ico\">\r\n \u25a6\r\n <\/div>\r\n\r\n <div>\r\n Select a highlighted date to watch that service.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* =========================================================\r\n SERVICES \/ VIDEOS\r\n\r\n Date format:\r\n YYYY-MM-DD\r\n\r\n StreamYard requires ?embed=true when using the\r\n \/watch\/ recording URL inside an iframe.\r\n ========================================================= *\/\r\n\r\nconst services = {\r\n\r\n\r\n \/* =========================\r\n JULY 12, 2026\r\n ========================== *\/\r\n\r\n \"2026-07-12\":{\r\n\r\n video:\r\n \"https:\/\/streamyard.com\/watch\/g7b8tRUGtKv2?embed=true\"\r\n\r\n },\r\n\r\n\r\n \/* =========================\r\n JULY 19, 2026\r\n ========================== *\/\r\n\r\n \"2026-07-19\":{\r\n\r\n video:\r\n \"https:\/\/streamyard.com\/watch\/C6TtvrjVyrJn?embed=true\"\r\n\r\n },\r\n\r\n\r\n \/* =========================\r\n JULY 26, 2026\r\n ========================== *\/\r\n\r\n \"2026-07-26\":{\r\n\r\n video:\r\n \"https:\/\/streamyard.com\/watch\/Q3DJjAsFvmwv?embed=true\"\r\n\r\n },\r\n\r\n\r\n \/* =========================\r\n AUGUST 2, 2026\r\n ========================== *\/\r\n\r\n \"2026-08-02\":{\r\n\r\n video:\r\n \"https:\/\/streamyard.com\/watch\/tMDVQiyQ5w86?embed=true\"\r\n\r\n }\r\n\r\n};\r\n\r\n\r\n\r\n\/* =========================================================\r\n MONTH NAMES\r\n ========================================================= *\/\r\n\r\nconst monthNames = [\r\n\r\n \"January\",\r\n \"February\",\r\n \"March\",\r\n \"April\",\r\n \"May\",\r\n \"June\",\r\n \"July\",\r\n \"August\",\r\n \"September\",\r\n \"October\",\r\n \"November\",\r\n \"December\"\r\n\r\n];\r\n\r\n\r\n\r\n\/* =========================================================\r\n AUTOMATICALLY OPEN CURRENT MONTH\r\n ========================================================= *\/\r\n\r\nconst today = new Date();\r\n\r\nlet currentDate = new Date(\r\n today.getFullYear(),\r\n today.getMonth(),\r\n 1\r\n);\r\n\r\n\r\n\r\n\/* =========================================================\r\n ELEMENTS\r\n ========================================================= *\/\r\n\r\nconst grid =\r\n document.getElementById(\"grid\");\r\n\r\nconst player =\r\n document.getElementById(\"player\");\r\n\r\nconst monthLabel =\r\n document.getElementById(\"month-label\");\r\n\r\n\r\n\r\n\/* =========================================================\r\n PAD NUMBER\r\n ========================================================= *\/\r\n\r\nfunction pad(n){\r\n\r\n return n\r\n .toString()\r\n .padStart(2,\"0\");\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n CREATE DATE KEY\r\n ========================================================= *\/\r\n\r\nfunction keyFor(\r\n year,\r\n monthIndex,\r\n day\r\n){\r\n\r\n return `${year}-${pad(monthIndex + 1)}-${pad(day)}`;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n BUILD CALENDAR\r\n ========================================================= *\/\r\n\r\nfunction buildCalendar(){\r\n\r\n\r\n const year =\r\n currentDate.getFullYear();\r\n\r\n\r\n const monthIndex =\r\n currentDate.getMonth();\r\n\r\n\r\n \/* Update month title *\/\r\n\r\n monthLabel.textContent =\r\n `${monthNames[monthIndex]} ${year}`;\r\n\r\n\r\n\r\n \/* First day of month *\/\r\n\r\n const firstDayOffset =\r\n new Date(\r\n year,\r\n monthIndex,\r\n 1\r\n ).getDay();\r\n\r\n\r\n\r\n \/* Number of days in month *\/\r\n\r\n const daysInMonth =\r\n new Date(\r\n year,\r\n monthIndex + 1,\r\n 0\r\n ).getDate();\r\n\r\n\r\n\r\n \/* Today's date *\/\r\n\r\n const today = new Date();\r\n\r\n\r\n\r\n const isCurrentMonth =\r\n today.getFullYear() === year &&\r\n today.getMonth() === monthIndex;\r\n\r\n\r\n\r\n \/* Clear calendar *\/\r\n\r\n grid.innerHTML = \"\";\r\n\r\n\r\n\r\n \/* Empty spaces before first day *\/\r\n\r\n for(\r\n let i = 0;\r\n i < firstDayOffset;\r\n i++\r\n ){\r\n\r\n const emptyCell =\r\n document.createElement(\"div\");\r\n\r\n emptyCell.className =\r\n \"day empty\";\r\n\r\n grid.appendChild(emptyCell);\r\n\r\n }\r\n\r\n\r\n\r\n \/* Create each day *\/\r\n\r\n for(\r\n let d = 1;\r\n d <= daysInMonth;\r\n d++\r\n ){\r\n\r\n\r\n const cell =\r\n document.createElement(\"div\");\r\n\r\n\r\n cell.className =\r\n \"day\";\r\n\r\n\r\n cell.textContent =\r\n d;\r\n\r\n\r\n\r\n \/* Highlight today *\/\r\n\r\n if(\r\n isCurrentMonth &&\r\n d === today.getDate()\r\n ){\r\n\r\n cell.classList.add(\"today\");\r\n\r\n }\r\n\r\n\r\n\r\n \/* Get date key *\/\r\n\r\n const key =\r\n keyFor(\r\n year,\r\n monthIndex,\r\n d\r\n );\r\n\r\n\r\n\r\n \/* Check if this date has a video *\/\r\n\r\n if(\r\n services[key]\r\n ){\r\n\r\n cell.classList.add(\"has\");\r\n\r\n\r\n cell.addEventListener(\r\n \"click\",\r\n function(){\r\n\r\n openService(\r\n key,\r\n d,\r\n year,\r\n monthIndex,\r\n cell\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n\r\n grid.appendChild(cell);\r\n\r\n }\r\n\r\n\r\n\r\n \/* Reset video player *\/\r\n\r\n player.innerHTML = `\r\n\r\n <div class=\"empty-state\">\r\n\r\n <div class=\"ico\">\r\n \u25a6\r\n <\/div>\r\n\r\n <div>\r\n Select a highlighted date to watch that service.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n OPEN SERVICE VIDEO\r\n ========================================================= *\/\r\n\r\nfunction openService(\r\n key,\r\n d,\r\n year,\r\n monthIndex,\r\n cell\r\n){\r\n\r\n\r\n \/* Remove active state *\/\r\n\r\n document\r\n .querySelectorAll(\".day.has\")\r\n .forEach(function(el){\r\n\r\n el.classList.remove(\"active\");\r\n\r\n });\r\n\r\n\r\n\r\n \/* Add active state *\/\r\n\r\n cell.classList.add(\"active\");\r\n\r\n\r\n\r\n \/* Get service *\/\r\n\r\n const service =\r\n services[key];\r\n\r\n\r\n\r\n \/* Show ONLY video *\/\r\n\r\n player.innerHTML = `\r\n\r\n <div class=\"video\">\r\n\r\n <iframe\r\n\r\n src=\"${service.video}\"\r\n\r\n title=\"Service Recording\"\r\n\r\n loading=\"lazy\"\r\n\r\n allow=\"autoplay; fullscreen; picture-in-picture\"\r\n\r\n allowfullscreen>\r\n\r\n <\/iframe>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n PREVIOUS MONTH\r\n ========================================================= *\/\r\n\r\ndocument\r\n .getElementById(\"prev\")\r\n .addEventListener(\r\n \"click\",\r\n function(){\r\n\r\n currentDate.setMonth(\r\n currentDate.getMonth() - 1\r\n );\r\n\r\n buildCalendar();\r\n\r\n }\r\n );\r\n\r\n\r\n\r\n\/* =========================================================\r\n NEXT MONTH\r\n ========================================================= *\/\r\n\r\ndocument\r\n .getElementById(\"next\")\r\n .addEventListener(\r\n \"click\",\r\n function(){\r\n\r\n currentDate.setMonth(\r\n currentDate.getMonth() + 1\r\n );\r\n\r\n buildCalendar();\r\n\r\n }\r\n );\r\n\r\n\r\n\r\n\/* =========================================================\r\n INITIALIZE CALENDAR\r\n ========================================================= *\/\r\n\r\nbuildCalendar();\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>On Demand \u2014 Past Services watch anytime On Demand Catch up on past services. Pick a date with a service recording, and it opens right here \u2014 no endless scrolling. June 2026 \u2039 \u203a Sun Mon Tue Wed Thu Fri Sat \u25a6 Select a highlighted date to watch that service.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2249","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/pages\/2249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/comments?post=2249"}],"version-history":[{"count":28,"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/pages\/2249\/revisions"}],"predecessor-version":[{"id":2590,"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/pages\/2249\/revisions\/2590"}],"wp:attachment":[{"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/media?parent=2249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nOn Demand \u2014 Past Services<\/title>\r\n\r\n<style>\r\n\r\n :root{\r\n --navy:#1c2b45;\r\n --navy-deep:#16223a;\r\n --panel:#22324f;\r\n --gold:#c9a84c;\r\n --line:#34456a;\r\n --muted:#9aa6bd;\r\n }\r\n\r\n *{\r\n box-sizing:border-box;\r\n margin:0;\r\n padding:0;\r\n }\r\n\r\n body{\r\n background:var(--navy);\r\n font-family:\"Helvetica Neue\",Arial,sans-serif;\r\n color:#fff;\r\n }\r\n\r\n .wrap{\r\n max-width:1080px;\r\n margin:0 auto;\r\n }\r\n\r\n .eyebrow{\r\n text-align:center;\r\n letter-spacing:.28em;\r\n text-transform:uppercase;\r\n font-size:13px;\r\n color:var(--gold);\r\n margin-bottom:12px;\r\n }\r\n\r\n h1{\r\n text-align:center;\r\n font-size:clamp(28px,4vw,42px);\r\n font-weight:700;\r\n margin-bottom:10px;\r\n }\r\n\r\n .sub{\r\n text-align:center;\r\n color:var(--muted);\r\n max-width:560px;\r\n margin:0 auto 40px;\r\n line-height:1.6;\r\n font-size:15px;\r\n }\r\n\r\n .layout{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:34px;\r\n align-items:start;\r\n }\r\n\r\n \/* =========================\r\n CALENDAR\r\n ========================= *\/\r\n\r\n .cal{\r\n background:var(--panel);\r\n border:1px solid var(--line);\r\n border-radius:14px;\r\n padding:22px;\r\n }\r\n\r\n .cal-head{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n margin-bottom:18px;\r\n }\r\n\r\n .cal-head h2{\r\n font-size:19px;\r\n font-weight:600;\r\n }\r\n\r\n .nav{\r\n display:flex;\r\n gap:8px;\r\n }\r\n\r\n .nav button{\r\n background:transparent;\r\n border:1px solid var(--line);\r\n color:#fff;\r\n width:34px;\r\n height:34px;\r\n border-radius:8px;\r\n cursor:pointer;\r\n font-size:16px;\r\n transition:.2s;\r\n }\r\n\r\n .nav button:hover{\r\n background:var(--gold);\r\n color:var(--navy);\r\n border-color:var(--gold);\r\n }\r\n\r\n .dow{\r\n display:grid;\r\n grid-template-columns:repeat(7,1fr);\r\n gap:6px;\r\n margin-bottom:8px;\r\n }\r\n\r\n .dow span{\r\n text-align:center;\r\n font-size:11px;\r\n letter-spacing:.08em;\r\n text-transform:uppercase;\r\n color:var(--muted);\r\n padding:4px 0;\r\n }\r\n\r\n .grid{\r\n display:grid;\r\n grid-template-columns:repeat(7,1fr);\r\n gap:6px;\r\n }\r\n\r\n .day{\r\n aspect-ratio:1;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n border-radius:8px;\r\n font-size:14px;\r\n color:#cdd5e4;\r\n position:relative;\r\n }\r\n\r\n .day.empty{\r\n visibility:hidden;\r\n }\r\n\r\n .day.has{\r\n cursor:pointer;\r\n background:rgba(201,168,76,.12);\r\n color:#fff;\r\n font-weight:600;\r\n border:1px solid rgba(201,168,76,.4);\r\n transition:.2s;\r\n }\r\n\r\n .day.has:hover{\r\n background:var(--gold);\r\n color:var(--navy);\r\n }\r\n\r\n .day.has::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:5px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:5px;\r\n height:5px;\r\n border-radius:50%;\r\n background:var(--gold);\r\n }\r\n\r\n .day.has.active{\r\n background:var(--gold);\r\n color:var(--navy);\r\n }\r\n\r\n .day.has.active::after{\r\n background:var(--navy);\r\n }\r\n\r\n .day.today{\r\n box-shadow:inset 0 0 0 1px var(--gold);\r\n }\r\n\r\n\r\n \/* =========================\r\n VIDEO PLAYER\r\n ========================= *\/\r\n\r\n .player{\r\n background:var(--panel);\r\n border:1px solid var(--line);\r\n border-radius:14px;\r\n padding:22px;\r\n min-height:380px;\r\n }\r\n\r\n .video{\r\n width:100%;\r\n aspect-ratio:16\/9;\r\n border-radius:10px;\r\n overflow:hidden;\r\n border:1px solid var(--line);\r\n background:#000;\r\n }\r\n\r\n .video iframe{\r\n width:100%;\r\n height:100%;\r\n border:none;\r\n display:block;\r\n }\r\n\r\n\r\n \/* =========================\r\n EMPTY STATE\r\n ========================= *\/\r\n\r\n .empty-state{\r\n height:100%;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n text-align:center;\r\n color:var(--muted);\r\n padding:40px 20px;\r\n min-height:340px;\r\n }\r\n\r\n .empty-state .ico{\r\n font-size:40px;\r\n margin-bottom:14px;\r\n opacity:.5;\r\n }\r\n\r\n\r\n \/* =========================\r\n MOBILE\r\n ========================= *\/\r\n\r\n @media(max-width:760px){\r\n\r\n .wrap{\r\n width:100%;\r\n padding:0 15px;\r\n }\r\n\r\n .layout{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n .cal{\r\n padding:18px;\r\n }\r\n\r\n .player{\r\n padding:15px;\r\n }\r\n\r\n .sub{\r\n padding:0 10px;\r\n }\r\n\r\n }\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n<div class=\"wrap\">\r\n\r\n \r\n\r\n <div class=\"eyebrow\">\r\n watch anytime\r\n <\/div>\r\n\r\n <h1>\r\n On Demand\r\n <\/h1>\r\n\r\n <p class=\"sub\">\r\n Catch up on past services. Pick a date with a service recording, and it opens right here \u2014 no endless scrolling.\r\n <\/p>\r\n\r\n\r\n <div class=\"layout\">\r\n\r\n\r\n \r\n\r\n <div class=\"cal\">\r\n\r\n <div class=\"cal-head\">\r\n\r\n <h2 id=\"month-label\">\r\n June 2026\r\n <\/h2>\r\n\r\n <div class=\"nav\">\r\n\r\n <button id=\"prev\" aria-label=\"Previous month\">\r\n \u2039\r\n <\/button>\r\n\r\n <button id=\"next\" aria-label=\"Next month\">\r\n \u203a\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"dow\">\r\n\r\n <span>Sun<\/span>\r\n <span>Mon<\/span>\r\n <span>Tue<\/span>\r\n <span>Wed<\/span>\r\n <span>Thu<\/span>\r\n <span>Fri<\/span>\r\n <span>Sat<\/span>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"grid\"\r\n id=\"grid\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <div\r\n class=\"player\"\r\n id=\"player\">\r\n\r\n <div class=\"empty-state\">\r\n\r\n <div class=\"ico\">\r\n \u25a6\r\n <\/div>\r\n\r\n <div>\r\n Select a highlighted date to watch that service.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* =========================================================\r\n SERVICES \/ VIDEOS\r\n\r\n Date format:\r\n YYYY-MM-DD\r\n\r\n StreamYard requires ?embed=true when using the\r\n \/watch\/ recording URL inside an iframe.\r\n ========================================================= *\/\r\n\r\nconst services = {\r\n\r\n\r\n \/* =========================\r\n JULY 12, 2026\r\n ========================== *\/\r\n\r\n \"2026-07-12\":{\r\n\r\n video:\r\n \"https:\/\/streamyard.com\/watch\/g7b8tRUGtKv2?embed=true\"\r\n\r\n },\r\n\r\n\r\n \/* =========================\r\n JULY 19, 2026\r\n ========================== *\/\r\n\r\n \"2026-07-19\":{\r\n\r\n video:\r\n \"https:\/\/streamyard.com\/watch\/C6TtvrjVyrJn?embed=true\"\r\n\r\n },\r\n\r\n\r\n \/* =========================\r\n JULY 26, 2026\r\n ========================== *\/\r\n\r\n \"2026-07-26\":{\r\n\r\n video:\r\n \"https:\/\/streamyard.com\/watch\/Q3DJjAsFvmwv?embed=true\"\r\n\r\n },\r\n\r\n\r\n \/* =========================\r\n AUGUST 2, 2026\r\n ========================== *\/\r\n\r\n \"2026-08-02\":{\r\n\r\n video:\r\n \"https:\/\/streamyard.com\/watch\/tMDVQiyQ5w86?embed=true\"\r\n\r\n }\r\n\r\n};\r\n\r\n\r\n\r\n\/* =========================================================\r\n MONTH NAMES\r\n ========================================================= *\/\r\n\r\nconst monthNames = [\r\n\r\n \"January\",\r\n \"February\",\r\n \"March\",\r\n \"April\",\r\n \"May\",\r\n \"June\",\r\n \"July\",\r\n \"August\",\r\n \"September\",\r\n \"October\",\r\n \"November\",\r\n \"December\"\r\n\r\n];\r\n\r\n\r\n\r\n\/* =========================================================\r\n AUTOMATICALLY OPEN CURRENT MONTH\r\n ========================================================= *\/\r\n\r\nconst today = new Date();\r\n\r\nlet currentDate = new Date(\r\n today.getFullYear(),\r\n today.getMonth(),\r\n 1\r\n);\r\n\r\n\r\n\r\n\/* =========================================================\r\n ELEMENTS\r\n ========================================================= *\/\r\n\r\nconst grid =\r\n document.getElementById(\"grid\");\r\n\r\nconst player =\r\n document.getElementById(\"player\");\r\n\r\nconst monthLabel =\r\n document.getElementById(\"month-label\");\r\n\r\n\r\n\r\n\/* =========================================================\r\n PAD NUMBER\r\n ========================================================= *\/\r\n\r\nfunction pad(n){\r\n\r\n return n\r\n .toString()\r\n .padStart(2,\"0\");\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n CREATE DATE KEY\r\n ========================================================= *\/\r\n\r\nfunction keyFor(\r\n year,\r\n monthIndex,\r\n day\r\n){\r\n\r\n return `${year}-${pad(monthIndex + 1)}-${pad(day)}`;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n BUILD CALENDAR\r\n ========================================================= *\/\r\n\r\nfunction buildCalendar(){\r\n\r\n\r\n const year =\r\n currentDate.getFullYear();\r\n\r\n\r\n const monthIndex =\r\n currentDate.getMonth();\r\n\r\n\r\n \/* Update month title *\/\r\n\r\n monthLabel.textContent =\r\n `${monthNames[monthIndex]} ${year}`;\r\n\r\n\r\n\r\n \/* First day of month *\/\r\n\r\n const firstDayOffset =\r\n new Date(\r\n year,\r\n monthIndex,\r\n 1\r\n ).getDay();\r\n\r\n\r\n\r\n \/* Number of days in month *\/\r\n\r\n const daysInMonth =\r\n new Date(\r\n year,\r\n monthIndex + 1,\r\n 0\r\n ).getDate();\r\n\r\n\r\n\r\n \/* Today's date *\/\r\n\r\n const today = new Date();\r\n\r\n\r\n\r\n const isCurrentMonth =\r\n today.getFullYear() === year &&\r\n today.getMonth() === monthIndex;\r\n\r\n\r\n\r\n \/* Clear calendar *\/\r\n\r\n grid.innerHTML = \"\";\r\n\r\n\r\n\r\n \/* Empty spaces before first day *\/\r\n\r\n for(\r\n let i = 0;\r\n i < firstDayOffset;\r\n i++\r\n ){\r\n\r\n const emptyCell =\r\n document.createElement(\"div\");\r\n\r\n emptyCell.className =\r\n \"day empty\";\r\n\r\n grid.appendChild(emptyCell);\r\n\r\n }\r\n\r\n\r\n\r\n \/* Create each day *\/\r\n\r\n for(\r\n let d = 1;\r\n d <= daysInMonth;\r\n d++\r\n ){\r\n\r\n\r\n const cell =\r\n document.createElement(\"div\");\r\n\r\n\r\n cell.className =\r\n \"day\";\r\n\r\n\r\n cell.textContent =\r\n d;\r\n\r\n\r\n\r\n \/* Highlight today *\/\r\n\r\n if(\r\n isCurrentMonth &&\r\n d === today.getDate()\r\n ){\r\n\r\n cell.classList.add(\"today\");\r\n\r\n }\r\n\r\n\r\n\r\n \/* Get date key *\/\r\n\r\n const key =\r\n keyFor(\r\n year,\r\n monthIndex,\r\n d\r\n );\r\n\r\n\r\n\r\n \/* Check if this date has a video *\/\r\n\r\n if(\r\n services[key]\r\n ){\r\n\r\n cell.classList.add(\"has\");\r\n\r\n\r\n cell.addEventListener(\r\n \"click\",\r\n function(){\r\n\r\n openService(\r\n key,\r\n d,\r\n year,\r\n monthIndex,\r\n cell\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n\r\n grid.appendChild(cell);\r\n\r\n }\r\n\r\n\r\n\r\n \/* Reset video player *\/\r\n\r\n player.innerHTML = `\r\n\r\n <div class=\"empty-state\">\r\n\r\n <div class=\"ico\">\r\n \u25a6\r\n <\/div>\r\n\r\n <div>\r\n Select a highlighted date to watch that service.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n OPEN SERVICE VIDEO\r\n ========================================================= *\/\r\n\r\nfunction openService(\r\n key,\r\n d,\r\n year,\r\n monthIndex,\r\n cell\r\n){\r\n\r\n\r\n \/* Remove active state *\/\r\n\r\n document\r\n .querySelectorAll(\".day.has\")\r\n .forEach(function(el){\r\n\r\n el.classList.remove(\"active\");\r\n\r\n });\r\n\r\n\r\n\r\n \/* Add active state *\/\r\n\r\n cell.classList.add(\"active\");\r\n\r\n\r\n\r\n \/* Get service *\/\r\n\r\n const service =\r\n services[key];\r\n\r\n\r\n\r\n \/* Show ONLY video *\/\r\n\r\n player.innerHTML = `\r\n\r\n <div class=\"video\">\r\n\r\n <iframe\r\n\r\n src=\"${service.video}\"\r\n\r\n title=\"Service Recording\"\r\n\r\n loading=\"lazy\"\r\n\r\n allow=\"autoplay; fullscreen; picture-in-picture\"\r\n\r\n allowfullscreen>\r\n\r\n <\/iframe>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n PREVIOUS MONTH\r\n ========================================================= *\/\r\n\r\ndocument\r\n .getElementById(\"prev\")\r\n .addEventListener(\r\n \"click\",\r\n function(){\r\n\r\n currentDate.setMonth(\r\n currentDate.getMonth() - 1\r\n );\r\n\r\n buildCalendar();\r\n\r\n }\r\n );\r\n\r\n\r\n\r\n\/* =========================================================\r\n NEXT MONTH\r\n ========================================================= *\/\r\n\r\ndocument\r\n .getElementById(\"next\")\r\n .addEventListener(\r\n \"click\",\r\n function(){\r\n\r\n currentDate.setMonth(\r\n currentDate.getMonth() + 1\r\n );\r\n\r\n buildCalendar();\r\n\r\n }\r\n );\r\n\r\n\r\n\r\n\/* =========================================================\r\n INITIALIZE CALENDAR\r\n ========================================================= *\/\r\n\r\nbuildCalendar();\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>On Demand \u2014 Past Services watch anytime On Demand Catch up on past services. Pick a date with a service recording, and it opens right here \u2014 no endless scrolling. June 2026 \u2039 \u203a Sun Mon Tue Wed Thu Fri Sat \u25a6 Select a highlighted date to watch that service.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2249","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/pages\/2249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/comments?post=2249"}],"version-history":[{"count":28,"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/pages\/2249\/revisions"}],"predecessor-version":[{"id":2590,"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/pages\/2249\/revisions\/2590"}],"wp:attachment":[{"href":"https:\/\/onlinedemoserver14.com\/Church\/wp-json\/wp\/v2\/media?parent=2249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}