{"id":3279,"date":"2026-07-27T12:41:51","date_gmt":"2026-07-27T04:41:51","guid":{"rendered":"https:\/\/www.klwong.hk\/?page_id=3279"},"modified":"2026-08-06T14:33:55","modified_gmt":"2026-08-06T06:33:55","slug":"%e5%b7%a5%e4%bd%9c%e5%a0%b1%e5%91%8a","status":"publish","type":"page","link":"https:\/\/www.klwong.hk\/?page_id=3279","title":{"rendered":"\u5de5\u4f5c\u5831\u544a"},"content":{"rendered":"<!-- \u7acb\u6cd5\u6703\u767c\u8a00\u5c08\u9801 -->\r\n<!-- \u8bf7\u5c06\u6b64\u5185\u5bb9\u590d\u5236\u5230 WordPress \u9875\u9762\u7684\u7f16\u8f91\u5668\u4e2d\uff0c\u5e76\u9009\u62e9 \"Election Home\" \u6a21\u677f -->\r\n<!-- \u6ce8\u610f\uff1a\u5c01\u9762\u9875\u5df2\u5728\u6a21\u677f\u4e2d\u663e\u793a\uff0c\u6b64\u5904\u53ea\u5305\u542b\u7acb\u6cd5\u6703\u767c\u8a00\u7279\u6709\u7684\u5185\u5bb9 -->\r\n\r\n<style>\r\n    .play-fullscreen-btn:hover {\r\n        background: rgba(30, 60, 114, 1) !important;\r\n        transform: scale(1.05);\r\n    }\r\n    \r\n    .play-overlay {\r\n        pointer-events: auto;\r\n        z-index: 5;\r\n    }\r\n    \r\n    .play-overlay-button {\r\n        background-image: url(\"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v4\/y6\/r\/WEXl7U8fX95.png\");\r\n        background-repeat: no-repeat;\r\n        background-size: 81px 245px;\r\n        background-position: 0px 0px;\r\n        background-color: transparent;\r\n        border: none;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        height: 80px;\r\n        width: 80px;\r\n        outline: none;\r\n        padding: 0;\r\n        margin: 0;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        transition: transform 0.3s ease;\r\n    }\r\n    \r\n    .play-overlay:hover .play-overlay-button {\r\n        transform: translate(-50%, -50%) scale(1.1);\r\n    }\r\n    \r\n    video {\r\n        z-index: 1;\r\n    }\r\n    \r\n    .video-cover {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-size: cover;\r\n        background-position: center;\r\n        cursor: pointer;\r\n        z-index: 10;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n    \/* \u76f4\u5cf6\u653e\u5728\u6df7\u5408 grid \u6642\uff1adesktop \u7528\u6a6b\u6846 + pillarbox\uff1bmobile \u9084\u539f\u76f4\u6846 *\/\r\n    \r\n    .is-portrait-mixed {\r\n        padding-bottom: var(--pb-desktop);\r\n    }\r\n    \r\n    .is-portrait-mixed>iframe.lazy-iframe,\r\n    .is-portrait-mixed>.video-cover {\r\n        width: var(--inner-w);\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n    }\r\n    \r\n    @media (max-width: 600px) {\r\n        .is-portrait-mixed {\r\n            padding-bottom: var(--pb-mobile);\r\n        }\r\n        .is-portrait-mixed>iframe.lazy-iframe,\r\n        .is-portrait-mixed>.video-cover {\r\n            width: 100%;\r\n            left: 0;\r\n            transform: none;\r\n        }\r\n    }\r\n    \r\n    .play-button-overlay {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        width: 80px;\r\n        height: 80px;\r\n        background: rgba(30, 60, 114, 0.9);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: transform 0.3s ease, background 0.3s ease;\r\n    }\r\n    \r\n    .play-button-overlay::after {\r\n        content: \"\";\r\n        width: 0;\r\n        height: 0;\r\n        border-left: 25px solid #fff;\r\n        border-top: 15px solid transparent;\r\n        border-bottom: 15px solid transparent;\r\n        margin-left: 5px;\r\n    }\r\n    \r\n    .play-button-overlay:hover {\r\n        transform: translate(-50%, -50%) scale(1.1);\r\n        background: rgba(30, 60, 114, 1);\r\n    }\r\n    \r\n    @media (max-width: 768px) {\r\n        .intro-page {\r\n            padding: 20px 10px !important;\r\n        }\r\n        .play-button-overlay {\r\n            width: 48px;\r\n            height: 48px;\r\n        }\r\n        .play-button-overlay::after {\r\n            border-left-width: 15px;\r\n            border-top-width: 9px;\r\n            border-bottom-width: 9px;\r\n            margin-left: 3px;\r\n        }\r\n        .play-fullscreen-btn {\r\n            display: none !important;\r\n        }\r\n    }\r\n    \/* \u2500\u2500 Legislative report links \u2500\u2500 *\/\r\n    \r\n    .legco-reports-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 250px);\r\n        gap: 32px;\r\n        justify-content: center;\r\n        margin: 48px auto 0;\r\n    }\r\n    \r\n    .legco-report-card {\r\n        display: block;\r\n        width: 250px;\r\n        max-width: 100%;\r\n        margin: 0 auto;\r\n        text-decoration: none;\r\n        color: inherit;\r\n        background: #fff;\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    }\r\n    \r\n    .legco-report-card:hover {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);\r\n    }\r\n    \r\n    .legco-report-card img {\r\n        width: 100%;\r\n        height: auto;\r\n        display: block;\r\n        vertical-align: middle;\r\n    }\r\n    \r\n    .legco-report-caption {\r\n        margin: 0;\r\n        padding: 16px 18px;\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        color: #1a1a2e;\r\n        text-align: center;\r\n        line-height: 1.5;\r\n        letter-spacing: 0.5px;\r\n    }\r\n    \r\n    @media (max-width: 800px) {\r\n        .legco-reports-grid {\r\n            \/*grid-template-columns: min(250px, 100%);*\/\r\n            grid-template-columns: repeat(2, 250px);\r\n            gap: 24px;\r\n        }\r\n    }\r\n    \r\n    @media (max-width: 600px) {\r\n        .legco-reports-grid {\r\n            \/*grid-template-columns: min(250px, 100%);*\/\r\n            grid-template-columns: repeat(2, 250px);\r\n            gap: 24px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- Main Content Section -->\r\n<div class=\"ebook-page intro-page\" style=\"text-align: center; padding: 20px 20px; border-left: none !important;\">\r\n    <div style=\"max-width: 1200px; margin: 0 auto;\">\r\n\r\n        <!-- Header Section -->\r\n        <div style=\"margin-bottom: 20px;\">\r\n            <h2 style=\"font-size: 36px; font-weight: bold; color: #2c3e50; margin-bottom: 20px; text-align: center;\">\r\n                \u5de5\u4f5c\u5831\u544a<\/h2>\r\n        <\/div>\r\n\r\n        <!-- Speech Videos Section -->\r\n        <div style=\"margin: 20px 0;\">\r\n            <div id=\"legco-video-sections\"><\/div>\r\n\r\n            <!-- Video Modal -->\r\n            <div id=\"videoModal\" style=\"display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; align-items: center; justify-content: center;\">\r\n                <div id=\"modalContainer\" style=\"position: relative; width: 90%; max-width: 1200px; max-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\r\n                    <div style=\"position: absolute; top: -44px; right: 0; display: flex; gap: 8px; z-index: 10001;\">\r\n                        <button id=\"modalFullscreenBtn\" style=\"background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); color: #fff; font-size: 14px; cursor: pointer; padding: 6px 12px; border-radius: 6px;\">\u5168\u5c4f<\/button>\r\n                        <button id=\"closeModal\" style=\"background: transparent; border: none; color: #fff; font-size: 32px; cursor: pointer; padding: 0 8px; line-height: 1;\">\u00d7<\/button>\r\n                    <\/div>\r\n                    <div id=\"modalVideoContainer\" style=\"position: relative; background: #000; display: flex; align-items: center; justify-content: center;\">\r\n                        <iframe id=\"modalVideo\" style=\"width: 100%; height: 100%; border: none; display: block; position: absolute; top: 0; left: 0;\" src=\"about:blank\" frameborder=\"0\" allowfullscreen allow=\"fullscreen; autoplay; encrypted-media\"><\/iframe>\r\n                        <video id=\"modalVideoMP4\" style=\"width: 100%; height: 100%; display: none; position: absolute; top: 0; left: 0; object-fit: contain;\" autoplay=\"autoplay\" controls=\"controls\" width=\"300\" height=\"150\"><\/video>\r\n                    <\/div>\r\n                    <p id=\"modalHint\" style=\"margin-top: 12px; font-size: 14px; color: rgba(255,255,255,0.85); text-align: center; display: none;\">\r\n                        \u70ba\u907f\u514d\u81ea\u52d5\u64ad\u653e\u975c\u97f3\uff0c\u8acb\u9ede\u64ca\u5f71\u7247\u5167\u64ad\u653e\u9375\u958b\u59cb\u64ad\u653e\uff08\u901a\u5e38\u6703\u6709\u8072\uff09\u3002\u6216\r\n                        <a id=\"modalOpenNewTab\" href=\"#\" target=\"_blank\" rel=\"noopener\" style=\"color: #7eb8ff;\">\u5728\u65b0\u5206\u9801\u958b\u555f<\/a>\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <script>\r\n                var VIDEO_CATEGORIES = [{\r\n                    title: '\u5de5\u4f5c\u5831\u544a',\r\n                    colorBar: ['#7c3aed', '#a78bfa'],\r\n                    colorBadge: '#7c3aed',\r\n                    subtitle: '',\r\n                    layout: 'single',\r\n                    videos: [{\r\n                        reel: '3496063077224661',\r\n                        h: 312,\r\n                        ratio: 0.5625,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/06\/2026\u9ec3\u9326\u826f-\u7acb\u6cd5\u6703\u5de5\u4f5c\u5831\u544a-34.png'\r\n                    }, {\r\n                        reel: '26428291096839707',\r\n                        h: 312,\r\n                        ratio: 0.5625,\r\n                        cover: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/04\/2026\u9ec3\u9326\u826f-\u7acb\u6cd5\u6703\u5de5\u4f5c\u5831\u544a-1.jpg'\r\n                    }],\r\n                    reports: [{\r\n                        image: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/07\/klwong-report-202605-1-scaled.jpg',\r\n                        href: '\/report202605.htm',\r\n                        label: '\u7acb\u6cd5\u6703\u5de5\u4f5c\u5831\u544a(2026\u5e745\u6708\u81f36\u6708)'\r\n                    }, {\r\n                        image: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/05\/klwong-report-202603.jpg',\r\n                        href: '\/report202603.htm',\r\n                        label: '\u7acb\u6cd5\u6703\u5de5\u4f5c\u5831\u544a(2026\u5e743\u6708\u81f34\u6708)'\r\n                    }, {\r\n                        image: 'https:\/\/www.klwong.hk\/wp-content\/uploads\/2026\/05\/klwong-report-202601.jpg',\r\n                        href: '\/report202601.htm',\r\n                        label: '\u7acb\u6cd5\u6703\u5de5\u4f5c\u5831\u544a(2026\u5e741\u6708\u81f32\u6708)'\r\n                    }]\r\n                }];\r\n\r\n                function el(tag, styles, attrs) {\r\n                    var node = document.createElement(tag);\r\n                    if (styles) node.style.cssText = styles;\r\n                    if (attrs) Object.keys(attrs).forEach(function(k) {\r\n                        node.setAttribute(k, attrs[k]);\r\n                    });\r\n                    return node;\r\n                }\r\n\r\n                function fbUrl(reel, h, ratio) {\r\n                    ratio = (typeof ratio === 'number' && ratio > 0) ? ratio : 1.78;\r\n                    var isPortrait = (1 \/ ratio) > 1;\r\n                    var pw, ph;\r\n                    if (isPortrait) {\r\n                        pw = 314;\r\n                        ph = Math.round(pw \/ ratio);\r\n                    } else {\r\n                        pw = 560;\r\n                        ph = h;\r\n                    }\r\n                    return 'https:\/\/www.facebook.com\/plugins\/video.php?height=' + ph +\r\n                        '&href=https%3A%2F%2Fwww.facebook.com%2Freel%2F' + reel +\r\n                        '%2F&show_text=false&width=' + pw + '&t=0';\r\n                }\r\n\r\n\r\n                function buildReportCard(r) {\r\n                    var card = el('a', null, {\r\n                        class: 'legco-report-card',\r\n                        href: r.href\r\n                    });\r\n\r\n                    var img = el('img', null, {\r\n                        src: r.image,\r\n                        alt: r.label,\r\n                        loading: 'lazy'\r\n                    });\r\n                    card.appendChild(img);\r\n\r\n                    var caption = el('p', null, {\r\n                        class: 'legco-report-caption'\r\n                    });\r\n                    caption.textContent = r.label;\r\n                    card.appendChild(caption);\r\n\r\n                    return card;\r\n                }\r\n\r\n                function buildVideoCard(v, isSingle) {\r\n                    var url = fbUrl(v.reel, v.h, v.ratio);\r\n                    var isPortrait = v.ratio > 0 && (1 \/ v.ratio) > 1;\r\n                    var useMixedLayout = isPortrait && !isSingle;\r\n                    var WRAPPER_RATIO = 1.78;\r\n\r\n                    var wrapper = el('div', null, {\r\n                        class: 'video-wrapper'\r\n                    });\r\n                    wrapper.style.cssText = 'border-radius:16px;padding:0;' +\r\n                        'box-shadow:0 8px 24px rgba(0,0,0,0.12);' +\r\n                        'transition:transform 0.3s ease,box-shadow 0.3s ease;' +\r\n                        'overflow:hidden;position:relative;width:100%;' +\r\n                        (isSingle ? (isPortrait ? 'max-width:420px;' : 'max-width:620px;') : '');\r\n\r\n                    var aspectBox = el('div',\r\n                        'position:relative;height:0;overflow:hidden;border-radius:16px;'\r\n                    );\r\n\r\n                    if (useMixedLayout) {\r\n                        aspectBox.classList.add('is-portrait-mixed');\r\n                        aspectBox.style.setProperty('--pb-desktop', (1 \/ WRAPPER_RATIO * 100).toFixed(4) + '%');\r\n                        aspectBox.style.setProperty('--pb-mobile', (1 \/ v.ratio * 100).toFixed(4) + '%');\r\n                        aspectBox.style.setProperty('--inner-w', (v.ratio \/ WRAPPER_RATIO * 100).toFixed(4) + '%');\r\n                    } else {\r\n                        aspectBox.style.paddingBottom = (1 \/ v.ratio * 100).toFixed(4) + '%';\r\n                    }\r\n\r\n                    var iframeStyle = useMixedLayout ?\r\n                        'border:none;overflow:hidden;position:absolute;top:0;height:100%;' :\r\n                        'border:none;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;';\r\n                    var iframe = el('iframe', iframeStyle, {\r\n                        class: 'lazy-iframe',\r\n                        'data-src': url,\r\n                        src: 'about:blank',\r\n                        frameborder: '0',\r\n                        scrolling: 'no',\r\n                        allowfullscreen: 'allowfullscreen'\r\n                    });\r\n\r\n                    var cover = el('div', null, {\r\n                        class: 'video-cover',\r\n                        'data-video-src': url,\r\n                        'data-aspect-ratio': String(v.ratio),\r\n                        'data-cover-image': v.cover\r\n                    });\r\n                    cover.style.backgroundImage = 'url(' + v.cover + ')';\r\n\r\n                    var playIcon = el('div', null, {\r\n                        class: 'play-button-overlay'\r\n                    });\r\n                    cover.appendChild(playIcon);\r\n\r\n                    aspectBox.appendChild(iframe);\r\n                    aspectBox.appendChild(cover);\r\n                    wrapper.appendChild(aspectBox);\r\n\r\n                    var btn = el('button',\r\n                        'position:absolute;bottom:20px;right:20px;' +\r\n                        'background:rgba(30,60,114,0.9);color:#fff;border:none;' +\r\n                        'padding:12px 24px;border-radius:8px;font-size:16px;font-weight:bold;' +\r\n                        'cursor:pointer;z-index:10;transition:all 0.3s ease;', {\r\n                            class: 'play-fullscreen-btn',\r\n                            'data-video-src': url,\r\n                            'data-aspect-ratio': String(v.ratio)\r\n                        });\r\n                    btn.textContent = '\u5168\u5c4f\u64ad\u653e';\r\n                    wrapper.appendChild(btn);\r\n\r\n                    return wrapper;\r\n                }\r\n\r\n                function buildCategorySection(cat, isLast, index) {\r\n                    var section = el('div', 'margin-bottom:' + (isLast ? '60' : '80') + 'px;');\r\n                    section.id = 'legco-cat-' + index;\r\n\r\n                    var header = el('div', 'display:flex;align-items:center;gap:16px;margin-bottom:40px;');\r\n\r\n                    var bar = el('span',\r\n                        'display:block;width:5px;height:52px;' +\r\n                        'background:linear-gradient(to bottom,' + cat.colorBar[0] + ',' + cat.colorBar[1] + ');' +\r\n                        'border-radius:3px;flex-shrink:0;');\r\n\r\n                    var titleGroup = el('div', 'text-align:left;');\r\n                    var titleRow = el('div', 'display:flex;align-items:center;gap:12px;flex-wrap:wrap;');\r\n\r\n                    var h3 = el('h3', 'font-size:26px;font-weight:800;color:#1a1a2e;margin:0;letter-spacing:3px;');\r\n                    h3.textContent = cat.title;\r\n\r\n                    var totalVideos = cat.subCategories ?\r\n                        cat.subCategories.reduce(function(s, sc) {\r\n                            return s + (sc.videos ? sc.videos.length : 0);\r\n                        }, 0) :\r\n                        (cat.videos ? cat.videos.length : 0);\r\n\r\n                    var badge = el('span',\r\n                        'font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px;' +\r\n                        'white-space:nowrap;letter-spacing:0;color:#fff;background:' + cat.colorBadge + ';');\r\n                    badge.textContent = totalVideos + ' \u5f71\u7247';\r\n\r\n                    titleRow.appendChild(h3);\r\n                    titleRow.appendChild(badge);\r\n                    titleGroup.appendChild(titleRow);\r\n\r\n                    if (cat.subtitle) {\r\n                        var sub = el('p',\r\n                            'font-size:12px;color:#aaa;margin:6px 0 0;letter-spacing:1.5px;text-transform:uppercase;'\r\n                        );\r\n                        sub.textContent = cat.subtitle;\r\n                        titleGroup.appendChild(sub);\r\n                    }\r\n\r\n                    var rule = el('div', 'flex:1;height:1px;background:linear-gradient(to right,#e0e0e0,transparent);');\r\n\r\n                    header.appendChild(bar);\r\n                    header.appendChild(titleGroup);\r\n                    header.appendChild(rule);\r\n                    section.appendChild(header);\r\n\r\n                    if (cat.subCategories) {\r\n                        cat.subCategories.forEach(function(subCat, si) {\r\n                            var subHeader = el('div', 'margin-bottom:28px;margin-top:' + (si === 0 ? '0' : '48') + 'px;');\r\n                            var subBar = el('span',\r\n                                'display:inline-block;width:4px;height:32px;' +\r\n                                'background:linear-gradient(to bottom,' + subCat.colorBar[0] + ',' + subCat.colorBar[1] + ');' +\r\n                                'border-radius:2px;margin-right:12px;vertical-align:middle;');\r\n                            var subTitle = el('span',\r\n                                'font-size:18px;font-weight:700;color:' + subCat.colorBadge + ';letter-spacing:1px;vertical-align:middle;');\r\n                            subTitle.textContent = subCat.title;\r\n                            var subBadge = el('span',\r\n                                'font-size:11px;font-weight:600;padding:2px 10px;border-radius:14px;margin-left:10px;' +\r\n                                'vertical-align:middle;letter-spacing:0;color:#fff;background:' + subCat.colorBadge + ';');\r\n                            subBadge.textContent = (subCat.videos ? subCat.videos.length : 0) + ' \u7247\u6bb5';\r\n                            subHeader.appendChild(subBar);\r\n                            subHeader.appendChild(subTitle);\r\n                            subHeader.appendChild(subBadge);\r\n                            section.appendChild(subHeader);\r\n\r\n                            var subGrid = el('div', null, {\r\n                                class: 'video-grid'\r\n                            });\r\n                            subGrid.style.cssText = 'display:grid;grid-template-columns:repeat(2,1fr);gap:40px;max-width:100%;';\r\n                            if (subCat.videos && subCat.videos.length > 0) {\r\n                                subCat.videos.forEach(function(v) {\r\n                                    subGrid.appendChild(buildVideoCard(v, false));\r\n                                });\r\n                            } else {\r\n                                var placeholder = el('div',\r\n                                    'text-align:center;padding:40px 0;color:#aaa;font-size:15px;letter-spacing:1px;');\r\n                                placeholder.textContent = '\u656c\u8acb\u671f\u5f85';\r\n                                subGrid.appendChild(placeholder);\r\n                            }\r\n                            section.appendChild(subGrid);\r\n                        });\r\n                    } else if (cat.layout === 'single') {\r\n                        var center = el('div', 'display:flex;justify-content:center; gap: 20px;');\r\n                        if (cat.videos) {\r\n                            cat.videos.forEach(function(v) {\r\n                                center.appendChild(buildVideoCard(v, true));\r\n                            });\r\n                        }\r\n                        section.appendChild(center);\r\n                    } else {\r\n                        var grid = el('div', null, {\r\n                            class: 'video-grid'\r\n                        });\r\n                        grid.style.cssText = 'display:grid;grid-template-columns:repeat(2,1fr);gap:40px;max-width:100%;';\r\n                        if (cat.videos) {\r\n                            cat.videos.forEach(function(v) {\r\n                                grid.appendChild(buildVideoCard(v, false));\r\n                            });\r\n                        }\r\n                        section.appendChild(grid);\r\n                    }\r\n\r\n                    \/* \u2500\u2500 report links (optional) \u2500\u2500 *\/\r\n                    if (cat.reports && cat.reports.length) {\r\n                        var reportsGrid = el('div', null, {\r\n                            class: 'legco-reports-grid'\r\n                        });\r\n                        cat.reports.forEach(function(r) {\r\n                            reportsGrid.appendChild(buildReportCard(r));\r\n                        });\r\n                        section.appendChild(reportsGrid);\r\n                    }\r\n\r\n                    return section;\r\n                }\r\n\r\n                document.addEventListener('DOMContentLoaded', function() {\r\n                    var container = document.getElementById('legco-video-sections');\r\n\r\n                    VIDEO_CATEGORIES.forEach(function(cat, i) {\r\n                        container.appendChild(buildCategorySection(cat, i === VIDEO_CATEGORIES.length - 1, i));\r\n                    });\r\n\r\n                    var modal = document.getElementById('videoModal');\r\n                    var modalVideo = document.getElementById('modalVideo');\r\n                    var modalVideoMP4 = document.getElementById('modalVideoMP4');\r\n                    var modalVideoContainer = document.getElementById('modalVideoContainer');\r\n                    var modalContainer = document.getElementById('modalContainer');\r\n                    var closeModalBtn = document.getElementById('closeModal');\r\n                    var modalFullscreenBtn = document.getElementById('modalFullscreenBtn');\r\n                    var modalContainerStyleLandscape =\r\n                        'position:relative;width:90%;max-width:1200px;max-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;';\r\n                    var modalContainerStylePortrait =\r\n                        'position:relative;width:auto;max-width:100%;max-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 12px;box-sizing:border-box;';\r\n\r\n                    function parseReelUrl(embedUrl) {\r\n                        var m = embedUrl.match(\/href=([^&]+)\/);\r\n                        if (m) try {\r\n                            return decodeURIComponent(m[1]);\r\n                        } catch (e) {}\r\n                        return null;\r\n                    }\r\n\r\n                    function openVideoModal(videoSrc, aspectRatio, isMP4) {\r\n                        isMP4 = isMP4 || false;\r\n                        var reelUrl = parseReelUrl(videoSrc);\r\n                        var hintEl = document.getElementById('modalHint');\r\n                        var newTabEl = document.getElementById('modalOpenNewTab');\r\n                        if (reelUrl && newTabEl) {\r\n                            newTabEl.href = reelUrl;\r\n                            hintEl.style.display = 'block';\r\n                        } else {\r\n                            hintEl.style.display = 'none';\r\n                        }\r\n\r\n                        var maxH = window.innerHeight * 0.9;\r\n                        var maxW = window.innerWidth * 0.9;\r\n                        var h, w;\r\n                        if (aspectRatio > 0 && (1 \/ aspectRatio) > 1) {\r\n                            h = maxH;\r\n                            w = h * aspectRatio;\r\n                            if (w > maxW) {\r\n                                w = maxW;\r\n                                h = w \/ aspectRatio;\r\n                            }\r\n                        } else {\r\n                            w = Math.min(maxW, 1200);\r\n                            h = w \/ aspectRatio;\r\n                            if (h > maxH) {\r\n                                h = maxH;\r\n                                w = h * aspectRatio;\r\n                            }\r\n                        }\r\n\r\n                        modalVideoContainer.style.cssText =\r\n                            'position:relative;background:#000;display:flex;align-items:center;justify-content:center;' +\r\n                            'width:' + w + 'px;height:' + h +\r\n                            'px;max-width:100%;max-height:90vh;border-radius:8px;overflow:hidden;';\r\n\r\n                        if (modalContainer) {\r\n                            modalContainer.style.cssText =\r\n                                (aspectRatio > 0 && (1 \/ aspectRatio) > 1) ?\r\n                                modalContainerStylePortrait :\r\n                                modalContainerStyleLandscape;\r\n                        }\r\n\r\n                        modal.style.display = 'flex';\r\n                        document.body.style.overflow = 'hidden';\r\n                        if (modalFullscreenBtn) modalFullscreenBtn.textContent = '\u5168\u5c4f';\r\n\r\n                        if (isMP4) {\r\n                            modalVideo.style.display = 'none';\r\n                            modalVideoMP4.style.display = 'block';\r\n                            modalVideoMP4.src = videoSrc;\r\n                            modalVideoMP4.play().catch(function(e) {\r\n                                console.log('MP4 autoplay failed:', e);\r\n                            });\r\n                        } else {\r\n                            modalVideoMP4.style.display = 'none';\r\n                            modalVideo.style.display = 'block';\r\n                            modalVideo.src = videoSrc;\r\n                        }\r\n                    }\r\n\r\n                    function closeVideoModal() {\r\n                        if (document.fullscreenElement) document.exitFullscreen();\r\n                        modal.style.display = 'none';\r\n                        modalVideo.src = 'about:blank';\r\n                        modalVideoMP4.src = '';\r\n                        modalVideoMP4.pause();\r\n                        document.body.style.overflow = '';\r\n                        if (modalContainer) modalContainer.style.cssText = modalContainerStyleLandscape;\r\n                    }\r\n\r\n                    container.addEventListener('click', function(e) {\r\n                        var btn = e.target.closest('.play-fullscreen-btn');\r\n                        if (btn) {\r\n                            e.stopPropagation();\r\n                            openVideoModal(\r\n                                btn.getAttribute('data-video-src'),\r\n                                parseFloat(btn.getAttribute('data-aspect-ratio')) || 1.78,\r\n                                btn.getAttribute('data-is-mp4') === 'true'\r\n                            );\r\n                            return;\r\n                        }\r\n                        var cover = e.target.closest('.video-cover');\r\n                        if (cover) {\r\n                            e.stopPropagation();\r\n                            openVideoModal(\r\n                                cover.getAttribute('data-video-src'),\r\n                                parseFloat(cover.getAttribute('data-aspect-ratio')) || 1.78,\r\n                                false\r\n                            );\r\n                        }\r\n                    });\r\n\r\n                    modalFullscreenBtn.addEventListener('click', function() {\r\n                        if (!document.fullscreenElement) {\r\n                            modalVideoContainer.requestFullscreen()\r\n                                .then(function() {\r\n                                    modalFullscreenBtn.textContent = '\u9000\u51fa\u5168\u5c4f';\r\n                                })\r\n                                .catch(function() {\r\n                                    modalFullscreenBtn.textContent = '\u5168\u5c4f';\r\n                                });\r\n                        } else {\r\n                            document.exitFullscreen();\r\n                            modalFullscreenBtn.textContent = '\u5168\u5c4f';\r\n                        }\r\n                    });\r\n\r\n                    document.addEventListener('fullscreenchange', function() {\r\n                        if (!document.fullscreenElement) modalFullscreenBtn.textContent = '\u5168\u5c4f';\r\n                    });\r\n\r\n                    closeModalBtn.addEventListener('click', closeVideoModal);\r\n                    modal.addEventListener('click', function(e) {\r\n                        if (e.target === modal) closeVideoModal();\r\n                    });\r\n                    document.addEventListener('keydown', function(e) {\r\n                        if (e.key === 'Escape') {\r\n                            if (document.fullscreenElement) document.exitFullscreen();\r\n                            else if (modal.style.display === 'flex') closeVideoModal();\r\n                        }\r\n                    });\r\n                });\r\n            <\/script>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u5de5\u4f5c\u5831\u544a \u5168\u5c4f \u00d7 \u70ba\u907f\u514d\u81ea\u52d5\u64ad\u653e\u975c\u97f3\uff0c\u8acb\u9ede\u64ca\u5f71\u7247\u5167\u64ad\u653e\u9375\u958b\u59cb\u64ad\u653e\uff08\u901a\u5e38\u6703\u6709\u8072\uff09\u3002\u6216 \u5728\u65b0\u5206\u9801\u958b\u555f<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/election-home.php","meta":{"footnotes":""},"class_list":["post-3279","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/pages\/3279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.klwong.hk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3279"}],"version-history":[{"count":13,"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/pages\/3279\/revisions"}],"predecessor-version":[{"id":3376,"href":"https:\/\/www.klwong.hk\/index.php?rest_route=\/wp\/v2\/pages\/3279\/revisions\/3376"}],"wp:attachment":[{"href":"https:\/\/www.klwong.hk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}