{"id":2401,"date":"2026-02-02T06:06:39","date_gmt":"2026-02-02T06:06:39","guid":{"rendered":"https:\/\/clcadventist.org\/wp-public\/?page_id=2401"},"modified":"2026-03-19T05:56:14","modified_gmt":"2026-03-19T05:56:14","slug":"all-videos","status":"publish","type":"page","link":"https:\/\/clcadventist.org\/wp-public\/all-videos\/","title":{"rendered":"All Videos"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2401\" class=\"elementor elementor-2401\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3728bc6 e-flex e-con-boxed e-con e-parent\" data-id=\"3728bc6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a53f58 elementor-widget elementor-widget-html\" data-id=\"3a53f58\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* --- 1. GLOBAL FONTS --- *\/\r\n    .news-feed-container, \r\n    .news-feed-container *,\r\n    .header-modern,\r\n    .header-modern * {\r\n        font-family: 'Poppins', sans-serif !important;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* --- 2. HEADER STYLES --- *\/\r\n    .header-modern {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 30px;\r\n        border-bottom: 1px solid #eee;\r\n        padding-bottom: 15px;\r\n    }\r\n\r\n    .header-left {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n\r\n    \/* PULSING DOT *\/\r\n    .live-dot {\r\n        width: 10px;\r\n        height: 10px;\r\n        background-color: #245463;\r\n        border-radius: 50%;\r\n        box-shadow: 0 0 0 0 rgba(36, 84, 99, 0.7);\r\n        animation: pulse-primary 2s infinite;\r\n    }\r\n\r\n    @keyframes pulse-primary {\r\n        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(36, 84, 99, 0.7); }\r\n        70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(36, 84, 99, 0); }\r\n        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(36, 84, 99, 0); }\r\n    }\r\n\r\n    .header-title {\r\n        font-size: 24px;\r\n        font-weight: 800;\r\n        color: #001E2B;\r\n        text-transform: uppercase;\r\n        letter-spacing: -0.5px;\r\n        margin: 0;\r\n        line-height: 1;\r\n    }\r\n    \r\n    .header-highlight { color: #245463; }\r\n\r\n    \/* --- RETURN BUTTON STYLE --- *\/\r\n    .return-btn {\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: #245463; \r\n        text-decoration: none;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        padding: 8px 16px;\r\n        border: 1px solid rgba(36, 84, 99, 0.2);\r\n        border-radius: 50px; \r\n        transition: all 0.3s ease;\r\n        white-space: nowrap; \r\n    }\r\n    \r\n    .return-btn:hover {\r\n        background-color: #245463;\r\n        color: white;\r\n    }\r\n\r\n\r\n    \/* --- 3. CONTAINER --- *\/\r\n    .news-feed-container {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n        padding: 20px 0;\r\n        max-width: 100%;\r\n    }\r\n\r\n    \/* --- 4. THE CARD --- *\/\r\n    .news-feed-card {\r\n        display: flex;\r\n        flex-direction: row; \/* DEFAULT: Side by Side *\/\r\n        background: linear-gradient(135deg, #ffffff 70%, #eff6f8 100%);\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        box-shadow: 0 5px 20px rgba(0,0,0,0.06); \r\n        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n        text-decoration: none !important;\r\n        border: 1px solid rgba(0,0,0,0.05);\r\n        height: 250px; \/* Desktop Height *\/\r\n    }\r\n\r\n    .news-feed-card:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 15px 35px rgba(0,0,0,0.12);\r\n        border-color: #245463;\r\n        background: #ffffff;\r\n    }\r\n\r\n    \/* --- 5. IMAGE SIDE --- *\/\r\n    .feed-img-box {\r\n        width: 35%; \/* Desktop Width *\/\r\n        height: 100%;\r\n        position: relative;\r\n        overflow: hidden;\r\n        background-color: #f0f0f0; \r\n        flex-shrink: 0;\r\n    }\r\n    .feed-img-box img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: transform 0.6s ease;\r\n    }\r\n    .news-feed-card:hover .feed-img-box img {\r\n        transform: scale(1.08);\r\n    }\r\n\r\n    \/* --- 6. CONTENT SIDE --- *\/\r\n    .feed-content {\r\n        width: 65%; \/* Desktop Width *\/\r\n        padding: 25px 30px;\r\n        display: flex;\r\n        flex-direction: column; \r\n        justify-content: space-between; \r\n    }\r\n\r\n    .feed-text-wrapper {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px;\r\n    }\r\n\r\n    .feed-meta {\r\n        font-size: 11px;\r\n        font-weight: 700;\r\n        color: #245463;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        padding-bottom: 8px;\r\n        border-bottom: 1px solid rgba(0,0,0,0.05);\r\n        width: 100%;\r\n    }\r\n    .feed-meta::before {\r\n        content: '';\r\n        display: inline-block;\r\n        width: 6px;\r\n        height: 6px;\r\n        background-color: #245463;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .feed-title {\r\n        font-size: 19px;\r\n        font-weight: 700;\r\n        color: #001E2B;\r\n        line-height: 1.35;\r\n        margin: 0;\r\n        transition: color 0.2s ease;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n    }\r\n    .news-feed-card:hover .feed-title { color: #245463; }\r\n\r\n    .feed-excerpt {\r\n        font-size: 13.5px;\r\n        color: #666;\r\n        line-height: 1.6;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .feed-arrow {\r\n        margin-top: auto; \r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: #245463;\r\n        background-color: #eff6f8; \r\n        padding: 8px 16px;\r\n        border-radius: 20px;\r\n        width: fit-content; \r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: all 0.3s ease;\r\n    }\r\n    \r\n    .news-feed-card:hover .feed-arrow { \r\n        background-color: #245463; \r\n        color: white; \r\n        padding-right: 20px; \r\n    }\r\n\r\n\r\n    \/* --- 7. PAGINATION STYLES --- *\/\r\n    .feed-pagination {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 8px;\r\n        margin-top: 30px;\r\n        padding-top: 20px;\r\n        border-top: 1px solid #eee;\r\n    }\r\n\r\n    .page-btn {\r\n        padding: 8px 14px;\r\n        border: 1px solid #ddd;\r\n        background: white;\r\n        color: #001E2B;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n        transition: all 0.2s;\r\n        text-decoration: none;\r\n    }\r\n\r\n    .page-btn:hover { border-color: #245463; color: #245463; }\r\n    .page-btn.active { background-color: #245463; color: white; border-color: #245463; }\r\n    .page-btn.disabled { opacity: 0.5; cursor: default; pointer-events: none; }\r\n\r\n\r\n    \/* --- RESPONSIVE FIXES --- *\/\r\n\r\n    \/* TABLET (1024px to 768px) - SIDE BY SIDE BUT COMPACT *\/\r\n    @media (max-width: 1024px) {\r\n        .news-feed-container {\r\n            padding: 0;\r\n        }\r\n\r\n        .news-feed-card {\r\n            flex-direction: row; \r\n            height: 200px; \r\n        }\r\n\r\n        .feed-img-box {\r\n            width: 35%; \r\n        }\r\n\r\n        .feed-content {\r\n            width: 65%;\r\n            padding: 15px 20px; \r\n            gap: 5px;\r\n        }\r\n\r\n        .feed-title { font-size: 16px; }\r\n        .feed-excerpt { font-size: 12px; }\r\n    }\r\n\r\n    \/* MOBILE (767px and below) - STACKED VERTICALLY *\/\r\n    @media (max-width: 767px) {\r\n        .news-feed-card {\r\n            flex-direction: column;\r\n            height: auto;\r\n            padding-bottom: 20px;\r\n        }\r\n        \r\n        .feed-img-box { width: 100%; height: 180px; }\r\n        .feed-content { width: 100%; padding: 20px 25px; }\r\n        \r\n        .btn-text { display: none; }\r\n        .return-btn { align-self: flex-end; }\r\n        .header-modern { gap: 10px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"header-modern\">\r\n    <div class=\"header-left\">\r\n        <div class=\"live-dot\"><\/div>\r\n        <h3 class=\"header-title\">ALL <span class=\"header-highlight\">VIDEOS<\/span><\/h3>\r\n    <\/div>\r\n    <a href=\"\/wp-public\/news\" class=\"return-btn\">\r\n        \u2190 <span class=\"btn-text\">Back to News<\/span>\r\n    <\/a>\r\n<\/div>\r\n\r\n<div id=\"video-feed-target\" class=\"news-feed-container\">\r\n    <h4 style=\"color:#ccc; text-align:center; font-family:'Poppins', sans-serif;\">Loading...<\/h4>\r\n<\/div>\r\n\r\n<div id=\"video-pagination\" class=\"feed-pagination\"><\/div>\r\n\r\n<script>\r\n    \/\/ --- CONFIGURATION ---\r\n    \/\/ categories=32        -> Fetch \"Videos\"\r\n    \/\/ categories_exclude=11 -> Block \"News Flash\"\r\n    const API_URL = '\/wp-public\/wp-json\/wp\/v2\/posts?_embed&per_page=10&categories=32&categories_exclude=11';\r\n    \r\n    let currentPage = 1;\r\n    let totalPages = 1;\r\n\r\n    \/\/ --- EXCERPT SETTINGS (SHORTER) ---\r\n    const EXCERPT_LIMIT = 100; \/\/ shorter than 140\r\n\r\n    \/\/ Helper to decode HTML entities\r\n    const decodeHTML = (html) => {\r\n        const txt = document.createElement(\"textarea\");\r\n        txt.innerHTML = html || \"\";\r\n        return txt.value;\r\n    };\r\n\r\n    \/\/ --- START OF ARTICLE ONLY: first real <p> from post.content.rendered ---\r\n    const getFirstParagraphText = (contentHtml) => {\r\n        const div = document.createElement(\"div\");\r\n        div.innerHTML = contentHtml || \"\";\r\n\r\n        \/\/ remove non-article blocks\r\n        div.querySelectorAll(\"script, style, noscript, iframe\").forEach(n => n.remove());\r\n        div.querySelectorAll(\".wp-block-embed, .wp-block-embed-youtube, figure\").forEach(n => n.remove());\r\n\r\n        \/\/ get first non-empty paragraph\r\n        const paras = Array.from(div.querySelectorAll(\"p\"))\r\n            .map(p => (p.textContent || \"\").replace(\/\\u00A0\/g, \" \").trim())\r\n            .filter(t => t.length > 0);\r\n\r\n        return paras[0] || \"\";\r\n    };\r\n\r\n    \/\/ Optional: shorter word-length filter (1\u20138 chars)\r\n    \/\/ If you DON'T want this, comment out the line that calls keepWords1to8(...)\r\n    const keepWords1to8 = (text) => {\r\n        const normalized = (text || \"\").replace(\/\\s+\/g, \" \").trim();\r\n        const kept = normalized\r\n            .split(\" \")\r\n            .map(w => w.trim())\r\n            .filter(Boolean)\r\n            .filter(w => {\r\n                const core = w.replace(\/^[^\\w']+|[^\\w']+$\/g, \"\");\r\n                return core.length >= 1 && core.length <= 8;\r\n            })\r\n            .join(\" \");\r\n        return kept.replace(\/\\s+\/g, \" \").trim();\r\n    };\r\n\r\n    async function loadVideoFeed(page) {\r\n        const container = document.getElementById('video-feed-target');\r\n        \r\n        if(page !== 1) {\r\n            const header = container.previousElementSibling;\r\n            if(header) header.scrollIntoView({behavior: 'smooth'});\r\n        }\r\n\r\n        container.style.opacity = '0.5';\r\n\r\n        try {\r\n            const res = await fetch(`${API_URL}&page=${page}`);\r\n            if (!res.ok) throw new Error('API Error');\r\n            \r\n            const totalPagesHeader = res.headers.get('X-WP-TotalPages');\r\n            if(totalPagesHeader) totalPages = parseInt(totalPagesHeader);\r\n\r\n            const posts = await res.json();\r\n\r\n            container.innerHTML = '';\r\n            container.style.opacity = '1';\r\n\r\n            if(posts.length === 0) {\r\n                container.innerHTML = '<p style=\"text-align:center; color:#666;\">No videos found.<\/p>';\r\n                return;\r\n            }\r\n\r\n            posts.forEach(post => {\r\n                \/\/ --- 1. SMART IMAGE LOGIC (Prioritize Featured, then YouTube) ---\r\n                let imgURL = 'https:\/\/clcadventist.org\/wp-content\/uploads\/placeholder.jpg';\r\n                if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\r\n                    imgURL = post._embedded['wp:featuredmedia'][0].source_url;\r\n                } else {\r\n                    const ytMatch =\r\n                        post.content.rendered.match(\/youtube\\.com\\\/embed\\\/([a-zA-Z0-9_-]+)\/) || \r\n                        post.content.rendered.match(\/youtube\\.com\\\/watch\\?v=([a-zA-Z0-9_-]+)\/);\r\n                    if (ytMatch && ytMatch[1]) {\r\n                        imgURL = `https:\/\/img.youtube.com\/vi\/${ytMatch[1]}\/mqdefault.jpg`;\r\n                    }\r\n                }\r\n\r\n                \/\/ --- 2. EXCERPT (START OF ARTICLE PARAGRAPH) ---\r\n                let cleanExcerpt = getFirstParagraphText(post.content?.rendered || \"\");\r\n\r\n                \/\/ light cleanup (keep minimal so it stays \"start of article\")\r\n                cleanExcerpt = decodeHTML(cleanExcerpt);\r\n                cleanExcerpt = cleanExcerpt.replace(\/(https?:\\\/\\\/[^\\s]+)\/g, '');          \/\/ remove URLs\r\n                cleanExcerpt = cleanExcerpt.replace(\/^[\\s\\-\\\u2013\\\u2014\\.|,:]+\/, '').trim();      \/\/ trim leading symbols\r\n                cleanExcerpt = cleanExcerpt.replace(\/\\s+\/g, ' ').trim();                  \/\/ normalize spaces\r\n\r\n                \/\/ OPTIONAL: apply 1\u20138 chars word filter (comment out if you want normal readable excerpt)\r\n                cleanExcerpt = keepWords1to8(cleanExcerpt);\r\n\r\n                \/\/ Fallback\r\n                if(!cleanExcerpt || cleanExcerpt.length < 5) {\r\n                    cleanExcerpt = \"Watch the full video to learn more.\";\r\n                }\r\n\r\n                \/\/ Truncate (shorter limit)\r\n                cleanExcerpt = cleanExcerpt.substring(0, EXCERPT_LIMIT) + (cleanExcerpt.length > EXCERPT_LIMIT ? '...' : '');\r\n\r\n                const date = new Date(post.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });\r\n\r\n                const card = `\r\n                    <a href=\"${post.link}\" class=\"news-feed-card\">\r\n                        <div class=\"feed-img-box\">\r\n                            <img decoding=\"async\" src=\"${imgURL}\" alt=\"Video Thumbnail\" loading=\"lazy\">\r\n                        <\/div>\r\n                        <div class=\"feed-content\">\r\n                            <div class=\"feed-text-wrapper\">\r\n                                <div class=\"feed-meta\">${date}<\/div>\r\n                                <h3 class=\"feed-title\">${post.title.rendered}<\/h3>\r\n                                <div class=\"feed-excerpt\">${cleanExcerpt}<\/div>\r\n                            <\/div>\r\n                            <div class=\"feed-arrow\">Watch Video \u2192<\/div>\r\n                        <\/div>\r\n                    <\/a>\r\n                `;\r\n                container.innerHTML += card;\r\n            });\r\n\r\n            renderPagination(page, totalPages);\r\n\r\n        } catch (e) {\r\n            console.error(e);\r\n            container.innerHTML = '<p style=\"color:red; text-align:center;\">Error loading videos.<\/p>';\r\n        }\r\n    }\r\n\r\n    function renderPagination(current, total) {\r\n        const nav = document.getElementById('video-pagination');\r\n        nav.innerHTML = '';\r\n\r\n        if(total <= 1) return; \r\n\r\n        \/\/ Prev\r\n        const prevBtn = document.createElement('button');\r\n        prevBtn.innerText = '\u2190 Prev';\r\n        prevBtn.className = `page-btn ${current === 1 ? 'disabled' : ''}`;\r\n        prevBtn.onclick = () => loadVideoFeed(current - 1);\r\n        nav.appendChild(prevBtn);\r\n\r\n        \/\/ Numbers\r\n        let range = [];\r\n        if (total <= 5) {\r\n            for (let i = 1; i <= total; i++) range.push(i);\r\n        } else {\r\n            if (current > 3) range.push(1, '...');\r\n            else range.push(1, 2, 3);\r\n            if (current > 3 && current < total - 2) range.push(current - 1, current, current + 1);\r\n            if (current < total - 2) range.push('...', total);\r\n            else if (current >= total - 2) range.push(total - 2, total - 1, total);\r\n            range = [...new Set(range)].sort((a,b) => (typeof a === 'number' && typeof b === 'number') ? a - b : 0);\r\n        }\r\n\r\n        range.forEach(p => {\r\n            const btn = document.createElement('button');\r\n            btn.innerText = p;\r\n            if(p === '...') {\r\n                btn.className = 'page-btn disabled';\r\n                btn.style.border = 'none';\r\n            } else {\r\n                btn.className = `page-btn ${p === current ? 'active' : ''}`;\r\n                btn.onclick = () => loadVideoFeed(p);\r\n            }\r\n            nav.appendChild(btn);\r\n        });\r\n\r\n        \/\/ Next\r\n        const nextBtn = document.createElement('button');\r\n        nextBtn.innerText = 'Next \u2192';\r\n        nextBtn.className = `page-btn ${current === total ? 'disabled' : ''}`;\r\n        nextBtn.onclick = () => loadVideoFeed(current + 1);\r\n        nav.appendChild(nextBtn);\r\n    }\r\n\r\n    loadVideoFeed(1);\r\n<\/script>\r\n\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>ALL VIDEOS \u2190 Back to News Loading&#8230;<\/p>\n","protected":false},"author":809,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-custom.blade.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-2401","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages\/2401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/users\/809"}],"replies":[{"embeddable":true,"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/comments?post=2401"}],"version-history":[{"count":23,"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages\/2401\/revisions"}],"predecessor-version":[{"id":5962,"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages\/2401\/revisions\/5962"}],"wp:attachment":[{"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/media?parent=2401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}