{"id":1058,"date":"2026-09-03T15:05:49","date_gmt":"2026-09-03T07:05:49","guid":{"rendered":"http:\/\/elitehousehold.local\/?page_id=1058"},"modified":"2026-10-12T13:35:39","modified_gmt":"2026-10-12T05:35:39","slug":"youtube-videos","status":"publish","type":"page","link":"https:\/\/www.elite-household.com\/en\/youtube-videos\/","title":{"rendered":"Video Center"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   ELITE\uff5cVIDEO CENTER\n   BLACK TV VERSION\n========================================================= *\/\n\n\n\/* =========================================================\n   01\uff5c\u6574\u9ad4\n========================================================= *\/\n\n.elite-video-center {\n    width: 100%;\n\n    padding: 80px 24px 110px;\n\n    background: #f5f7f6;\n}\n\n\n.elite-video-container {\n    width: 100%;\n    max-width: 1440px;\n\n    margin: 0 auto;\n}\n\n\n\n\/* =========================================================\n   02\uff5c\u6a19\u984c\n========================================================= *\/\n\n.elite-video-heading {\n    margin-bottom: 45px;\n\n    text-align: center;\n}\n\n\n.elite-video-kicker {\n    display: block;\n\n    margin-bottom: 8px;\n\n    color: #557e76;\n\n    font-size: 13px;\n    font-weight: 700;\n\n    letter-spacing: 2.6px;\n}\n\n\n.elite-video-heading h2 {\n    margin: 0;\n\n    color: #222;\n\n    font-size: 40px;\n    font-weight: 700;\n\n    line-height: 1.3;\n}\n\n\n.elite-video-heading p {\n    max-width: 680px;\n\n    margin: 14px auto 0;\n\n    color: #717977;\n\n    font-size: 15px;\n\n    line-height: 1.8;\n}\n\n\n\n\/* =========================================================\n   03\uff5c\u624b\u6a5f\u5206\u985e\n========================================================= *\/\n\n.elite-video-mobile-category {\n    display: none;\n}\n\n\n\n\/* =========================================================\n   04\uff5c\u684c\u6a5f\u5206\u985e\n========================================================= *\/\n\n.elite-video-categories {\n    display: grid;\n\n    grid-template-columns:\n        repeat(4, minmax(0, 1fr));\n\n    gap: 12px;\n\n    margin-bottom: 55px;\n}\n\n\n.elite-video-category {\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n\n    width: 100%;\n    min-height: 96px;\n\n    padding: 18px 20px;\n\n    border: 1px solid #dce4e1 !important;\n    border-radius: 9px;\n\n    background: #fff !important;\n\n    text-align: left;\n\n    cursor: pointer;\n\n    appearance: none;\n    -webkit-appearance: none;\n\n    transition:\n        transform .22s ease,\n        border-color .22s ease,\n        background-color .22s ease,\n        box-shadow .22s ease;\n}\n\n\n.elite-video-category strong {\n    color: #557e76;\n\n    font-size: 12px;\n    font-weight: 700;\n\n    line-height: 1.4;\n}\n\n\n.elite-video-category span {\n    margin-top: 6px;\n\n    color: #555f5c;\n\n    font-size: 14px;\n\n    line-height: 1.45;\n}\n\n\n.elite-video-category:hover {\n    transform: translateY(-3px);\n\n    border-color: #557e76 !important;\n\n    box-shadow:\n        0 8px 25px\n        rgba(42, 67, 61, .08);\n}\n\n\n.elite-video-category.active {\n    transform: none;\n\n    border-color: #557e76 !important;\n\n    background: #557e76 !important;\n\n    box-shadow:\n        0 8px 24px\n        rgba(85, 126, 118, .20);\n}\n\n\n.elite-video-category.active strong,\n.elite-video-category.active span {\n    color: #fff;\n}\n\n\n.elite-video-category.active::after {\n    content: \"\";\n\n    position: absolute;\n\n    right: 16px;\n    bottom: 16px;\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background: #fff;\n}\n\n\n\n\/* =========================================================\n   05\uff5c\u76ee\u524d\u5206\u985e\n========================================================= *\/\n\n.elite-video-current-category {\n    margin-bottom: 20px;\n}\n\n\n.elite-video-current-category > span {\n    display: block;\n\n    color: #557e76;\n\n    font-size: 12px;\n    font-weight: 700;\n\n    letter-spacing: 1.8px;\n}\n\n\n.elite-video-current-category h3 {\n    margin: 5px 0 0;\n\n    color: #222;\n\n    font-size: 29px;\n    font-weight: 700;\n\n    line-height: 1.4;\n}\n\n\n\n\/* =========================================================\n   06\uff5cTV AREA\n========================================================= *\/\n\n.elite-tv-area {\n    width: 100%;\n\n    margin: 0 auto 25px;\n\n    padding-bottom: 32px;\n}\n\n\n\n\/* =========================================================\n   07\uff5c\u9ed1\u8272 TV \u5916\u6846\n========================================================= *\/\n\n.elite-tv-frame {\n    position: relative;\n\n    width: 100%;\n\n    padding:\n        12px\n        12px\n        0;\n\n    overflow: hidden;\n\n    border: 1px solid #252525;\n\n    border-radius: 20px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #292929 0%,\n            #151515 35%,\n            #080808 65%,\n            #1d1d1d 100%\n        );\n\n    box-shadow:\n        0 30px 70px\n        rgba(20, 32, 28, .22),\n\n        0 8px 22px\n        rgba(0, 0, 0, .18),\n\n        inset 0 1px 0\n        rgba(255,255,255,.10);\n}\n\n\n\n\/* \u4e0a\u65b9\u5fae\u5149 *\/\n\n.elite-tv-frame::before {\n    content: \"\";\n\n    position: absolute;\n\n    top: 0;\n    left: 8%;\n\n    width: 72%;\n    height: 1px;\n\n    background:\n        rgba(255,255,255,.20);\n}\n\n\n\n\/* =========================================================\n   08\uff5cTV \u87a2\u5e55\n========================================================= *\/\n\n.elite-tv-screen {\n    position: relative;\n\n    width: 100%;\n\n    aspect-ratio: 16 \/ 9;\n\n    overflow: hidden;\n\n    border: 1px solid #000;\n\n    border-radius: 11px;\n\n    background: #000;\n\n    box-shadow:\n        inset 0 0 40px\n        rgba(0,0,0,.80);\n}\n\n\n\n\/* \u87a2\u5e55\u53cd\u5149 *\/\n\n.elite-tv-screen::after {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 10;\n\n    pointer-events: none;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(255,255,255,.07),\n            rgba(255,255,255,.015) 20%,\n            transparent 42%\n        );\n}\n\n\n\n\/* =========================================================\n   09\uff5cYouTube\n========================================================= *\/\n\n.elite-player-mount {\n    width: 100%;\n    height: 100%;\n}\n\n\n.elite-player-mount iframe {\n    display: block;\n\n    width: 100% !important;\n    height: 100% !important;\n\n    border: 0;\n}\n\n\n\n\/* =========================================================\n   10\uff5cLoading \/ Empty\n========================================================= *\/\n\n.elite-player-status {\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 20;\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n\n    padding: 30px;\n\n    background:\n        radial-gradient(\n            circle at center,\n            #252928,\n            #0a0b0b\n        );\n\n    color: #dce4e1;\n\n    font-size: 17px;\n    font-weight: 600;\n\n    text-align: center;\n\n    letter-spacing: .5px;\n}\n\n\n.elite-tv-frame.is-loading\n.elite-player-status,\n.elite-tv-frame.is-empty\n.elite-player-status {\n    display: flex;\n}\n\n\n.elite-tv-frame.is-loading iframe,\n.elite-tv-frame.is-empty iframe {\n    opacity: 0;\n\n    pointer-events: none;\n}\n\n\n\n\/* =========================================================\n   11\uff5cTV \u4e0b\u65b9\n========================================================= *\/\n\n.elite-tv-bottom {\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: 38px;\n}\n\n\n.elite-tv-brand {\n    color: #686d6b;\n\n    font-size: 8px;\n    font-weight: 600;\n\n    letter-spacing: 2px;\n}\n\n\n.elite-tv-light {\n    position: absolute;\n\n    right: 24px;\n\n    width: 5px;\n    height: 5px;\n\n    border-radius: 50%;\n\n    background: #557e76;\n\n    box-shadow:\n        0 0 7px\n        rgba(85,126,118,.95);\n}\n\n\n\n\/* =========================================================\n   12\uff5cTV \u5e95\u5ea7\n========================================================= *\/\n\n.elite-tv-stand {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n\n.elite-tv-neck {\n    width: 72px;\n    height: 23px;\n\n    background:\n        linear-gradient(\n            to right,\n            #292929,\n            #0d0d0d,\n            #292929\n        );\n}\n\n\n.elite-tv-base {\n    width: 245px;\n    height: 9px;\n\n    border-radius:\n        0 0\n        50% 50%;\n\n    background:\n        linear-gradient(\n            to bottom,\n            #292929,\n            #090909\n        );\n\n    box-shadow:\n        0 8px 15px\n        rgba(0,0,0,.16);\n}\n\n\n\n\/* =========================================================\n   13\uff5c\u73fe\u5728\u64ad\u653e\n========================================================= *\/\n\n.elite-now-playing {\n    padding:\n        6px 3px\n        4px;\n}\n\n\n.elite-now-playing span {\n    display: block;\n\n    color: #557e76;\n\n    font-size: 11px;\n    font-weight: 700;\n\n    letter-spacing: 1.5px;\n}\n\n\n.elite-now-playing h3 {\n    margin: 8px 0 0;\n\n    color: #222;\n\n    font-size: 24px;\n    font-weight: 700;\n\n    line-height: 1.5;\n}\n\n\n\n\/* =========================================================\n   14\uff5cPrevious \/ Next\n========================================================= *\/\n\n.elite-video-navigation {\n    display: grid;\n\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 14px;\n\n    margin-top: 24px;\n}\n\n\n.elite-video-nav {\n    width: 100%;\n    min-height: 105px;\n\n    padding: 18px 20px;\n\n    border: 1px solid #dce4e1 !important;\n    border-radius: 10px;\n\n    background: #fff !important;\n\n    text-align: left;\n\n    cursor: pointer;\n\n    appearance: none;\n    -webkit-appearance: none;\n\n    transition:\n        transform .2s ease,\n        border-color .2s ease,\n        box-shadow .2s ease;\n}\n\n\n.elite-video-nav-next {\n    text-align: right;\n}\n\n\n.elite-video-nav:hover:not(:disabled) {\n    transform: translateY(-2px);\n\n    border-color: #557e76 !important;\n\n    box-shadow:\n        0 8px 22px\n        rgba(0,0,0,.06);\n}\n\n\n.elite-video-nav span {\n    display: block;\n\n    margin-bottom: 8px;\n\n    color: #557e76;\n\n    font-size: 10px;\n    font-weight: 700;\n\n    letter-spacing: .9px;\n}\n\n\n.elite-video-nav strong {\n    display: block;\n\n    color: #333;\n\n    font-size: 14px;\n    font-weight: 600;\n\n    line-height: 1.55;\n}\n\n\n.elite-video-nav:disabled {\n    opacity: .42;\n\n    cursor: default;\n}\n\n\n\n\/* =========================================================\n   15\uff5c\u64ad\u653e\u6e05\u55ae\n========================================================= *\/\n\n.elite-playlist-section {\n    margin-top: 65px;\n}\n\n\n.elite-playlist-heading {\n    display: flex;\n    align-items: flex-end;\n    justify-content: space-between;\n\n    gap: 20px;\n\n    margin-bottom: 22px;\n\n    padding-bottom: 16px;\n\n    border-bottom:\n        1px solid #dfe6e3;\n}\n\n\n.elite-playlist-heading > div > span {\n    display: block;\n\n    color: #557e76;\n\n    font-size: 11px;\n    font-weight: 700;\n\n    letter-spacing: 1.8px;\n}\n\n\n.elite-playlist-heading h3 {\n    margin: 4px 0 0;\n\n    color: #222;\n\n    font-size: 26px;\n    font-weight: 700;\n}\n\n\n.elite-playlist-count {\n    color: #737a78;\n\n    font-size: 13px;\n\n    white-space: nowrap;\n}\n\n\n\n\/* =========================================================\n   16\uff5c\u64ad\u653e\u6e05\u55ae GRID\n========================================================= *\/\n\n.elite-playlist-grid {\n    display: grid;\n\n    grid-template-columns:\n        repeat(3, minmax(0, 1fr));\n\n    gap: 18px;\n}\n\n\n\n\/* =========================================================\n   17\uff5c\u64ad\u653e\u6e05\u55ae\u5361\u7247\n========================================================= *\/\n\n.elite-playlist-item {\n    display: block;\n\n    overflow: hidden;\n\n    width: 100%;\n\n    padding: 0;\n\n    border:\n        1px solid #dfe5e2 !important;\n\n    border-radius: 11px;\n\n    background:\n        #fff !important;\n\n    text-align: left;\n\n    cursor: pointer;\n\n    appearance: none;\n    -webkit-appearance: none;\n\n    transition:\n        transform .22s ease,\n        border-color .22s ease,\n        box-shadow .22s ease;\n}\n\n\n.elite-playlist-item:hover {\n    transform:\n        translateY(-4px);\n\n    border-color:\n        #b8ccc6 !important;\n\n    box-shadow:\n        0 12px 28px\n        rgba(40,64,58,.09);\n}\n\n\n.elite-playlist-item.active {\n    border-color:\n        #557e76 !important;\n\n    box-shadow:\n        0 0 0 2px\n        rgba(85,126,118,.12);\n}\n\n\n\n\/* =========================================================\n   18\uff5c\u7e2e\u5716\n========================================================= *\/\n\n.elite-playlist-thumb {\n    position: relative;\n\n    width: 100%;\n\n    aspect-ratio:\n        16 \/ 9;\n\n    overflow: hidden;\n\n    background: #ddd;\n}\n\n\n.elite-playlist-thumb img {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n\n    transition:\n        transform .35s ease;\n}\n\n\n.elite-playlist-item:hover\n.elite-playlist-thumb img {\n    transform:\n        scale(1.03);\n}\n\n\n\n\/* \u6b63\u5728\u64ad\u653e *\/\n\n.elite-playlist-item.active\n.elite-playlist-thumb::before {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 2;\n\n    background:\n        rgba(18,31,27,.25);\n}\n\n\n.elite-playlist-item.active\n.elite-playlist-thumb::after {\n    content: \"\u25b6\";\n\n    position: absolute;\n\n    top: 50%;\n    left: 50%;\n\n    z-index: 3;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 46px;\n    height: 46px;\n\n    transform:\n        translate(-50%, -50%);\n\n    border-radius: 50%;\n\n    background:\n        rgba(85,126,118,.95);\n\n    color: #fff;\n\n    font-size: 13px;\n\n    box-shadow:\n        0 5px 14px\n        rgba(0,0,0,.2);\n}\n\n\n\n\/* =========================================================\n   19\uff5c\u5f71\u7247\u8cc7\u8a0a\n========================================================= *\/\n\n.elite-playlist-info {\n    padding:\n        15px 16px\n        18px;\n}\n\n\n.elite-playlist-number {\n    margin-bottom: 6px;\n\n    color: #557e76;\n\n    font-size: 10px;\n    font-weight: 700;\n\n    letter-spacing: 1px;\n}\n\n\n.elite-playlist-title {\n    display: -webkit-box;\n\n    overflow: hidden;\n\n    color: #303735;\n\n    font-size: 14px;\n    font-weight: 600;\n\n    line-height: 1.55;\n\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n}\n\n\n\n\/* =========================================================\n   20\uff5cEmpty\n========================================================= *\/\n\n.elite-playlist-empty {\n    grid-column:\n        1 \/ -1;\n\n    padding: 60px 20px;\n\n    border:\n        1px solid #e0e6e3;\n\n    border-radius: 11px;\n\n    background: #fff;\n\n    color: #777f7c;\n\n    font-size: 15px;\n\n    text-align: center;\n}\n\n\n\n\/* =========================================================\n   21\uff5cTablet\n========================================================= *\/\n\n@media screen and (max-width: 1024px) {\n\n    .elite-video-center {\n        padding:\n            65px 20px\n            85px;\n    }\n\n\n    .elite-video-categories {\n        grid-template-columns:\n            repeat(3, minmax(0, 1fr));\n    }\n\n\n    .elite-playlist-grid {\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n    }\n\n}\n\n\n\n\/* =========================================================\n   22\uff5cMobile\n========================================================= *\/\n\n@media screen and (max-width: 767px) {\n\n    .elite-video-center {\n        padding:\n            50px 16px\n            70px;\n    }\n\n\n    .elite-video-heading {\n        margin-bottom: 32px;\n    }\n\n\n    .elite-video-heading h2 {\n        font-size: 30px;\n    }\n\n\n    .elite-video-heading p {\n        font-size: 14px;\n    }\n\n\n\n    \/* \u684c\u6a5f\u5206\u985e *\/\n\n    .elite-video-categories {\n        display: none;\n    }\n\n\n\n    \/* \u624b\u6a5f\u5206\u985e *\/\n\n    .elite-video-mobile-category {\n        display: block;\n\n        margin-bottom: 34px;\n    }\n\n\n    .elite-video-mobile-category label {\n        display: block;\n\n        margin-bottom: 9px;\n\n        color: #557e76;\n\n        font-size: 11px;\n        font-weight: 700;\n\n        letter-spacing: 1.2px;\n    }\n\n\n    .elite-video-select-wrap {\n        position: relative;\n    }\n\n\n    .elite-video-select-wrap::after {\n        content: \"\u2304\";\n\n        position: absolute;\n\n        top: 50%;\n        right: 18px;\n\n        transform:\n            translateY(-58%);\n\n        color: #557e76;\n\n        font-size: 24px;\n\n        pointer-events: none;\n    }\n\n\n    .elite-video-select-wrap select {\n        display: block;\n\n        width: 100%;\n        min-height: 58px;\n\n        padding:\n            0 48px\n            0 17px;\n\n        border:\n            1px solid #d6e0dc;\n\n        border-radius: 9px;\n\n        outline: none;\n\n        background: #fff;\n\n        color: #333;\n\n        font-family: inherit;\n\n        font-size: 14px;\n        font-weight: 600;\n\n        appearance: none;\n        -webkit-appearance: none;\n    }\n\n\n\n    \/* \u5206\u985e\u6a19\u984c *\/\n\n    .elite-video-current-category {\n        margin-bottom: 14px;\n    }\n\n\n    .elite-video-current-category h3 {\n        font-size: 24px;\n    }\n\n\n\n    \/* TV *\/\n\n    .elite-tv-frame {\n        padding:\n            6px\n            6px\n            0;\n\n        border-radius: 11px;\n    }\n\n\n    .elite-tv-screen {\n        border-radius: 6px;\n    }\n\n\n    .elite-tv-bottom {\n        min-height: 25px;\n    }\n\n\n    .elite-tv-brand {\n        font-size: 6px;\n    }\n\n\n    .elite-tv-light {\n        right: 13px;\n\n        width: 4px;\n        height: 4px;\n    }\n\n\n    .elite-tv-neck {\n        width: 45px;\n        height: 13px;\n    }\n\n\n    .elite-tv-base {\n        width: 145px;\n        height: 6px;\n    }\n\n\n\n    \/* NOW *\/\n\n    .elite-now-playing h3 {\n        font-size: 19px;\n    }\n\n\n\n    \/* \u4e0a\u4e0b\u4e00\u5247 *\/\n\n    .elite-video-navigation {\n        grid-template-columns: 1fr;\n\n        gap: 9px;\n    }\n\n\n    .elite-video-nav {\n        min-height: 85px;\n    }\n\n\n    .elite-video-nav-next {\n        text-align: left;\n    }\n\n\n\n    \/* Playlist *\/\n\n    .elite-playlist-section {\n        margin-top: 48px;\n    }\n\n\n    .elite-playlist-heading h3 {\n        font-size: 23px;\n    }\n\n\n    .elite-playlist-grid {\n        grid-template-columns: 1fr;\n\n        gap: 12px;\n    }\n\n\n    .elite-playlist-item {\n        display: grid;\n\n        grid-template-columns:\n            130px minmax(0, 1fr);\n    }\n\n\n    .elite-playlist-thumb {\n        height: 100%;\n\n        min-height: 86px;\n\n        aspect-ratio: auto;\n    }\n\n\n    .elite-playlist-info {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n\n        padding:\n            12px 14px;\n    }\n\n}\n\n\n\n\/* =========================================================\n   23\uff5c\u5c0f\u624b\u6a5f\n========================================================= *\/\n\n@media screen and (max-width: 400px) {\n\n    .elite-video-center {\n        padding-left: 12px;\n        padding-right: 12px;\n    }\n\n\n    .elite-playlist-item {\n        grid-template-columns:\n            110px minmax(0, 1fr);\n    }\n\n\n    .elite-playlist-title {\n        font-size: 13px;\n    }\n\n}\n\n\/* =========================================================\n   24\uff5c\u684c\u6a5f\u8207\u624b\u6a5f\uff1a\u7d71\u4e00\u4f7f\u7528\u4e0b\u62c9\u5f0f\u5206\u985e\u9078\u55ae\n   \u50c5\u8abf\u6574\u5206\u985e\u9078\u55ae\uff0c\u5176\u9918\u6a23\u5f0f\u5168\u90e8\u6cbf\u7528\u539f\u7248\n========================================================= *\/\n\n.elite-video-center .elite-video-categories {\n    display: none;\n}\n\n.elite-video-center .elite-video-mobile-category {\n    display: block;\n    margin-bottom: 34px;\n}\n\n.elite-video-center .elite-video-mobile-category label {\n    display: block;\n    margin-bottom: 9px;\n    color: #557e76;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 1.2px;\n}\n\n.elite-video-center .elite-video-select-wrap {\n    position: relative;\n}\n\n.elite-video-center .elite-video-select-wrap::after {\n    content: \"\u2304\";\n    position: absolute;\n    top: 50%;\n    right: 18px;\n    transform: translateY(-58%);\n    color: #557e76;\n    font-size: 24px;\n    pointer-events: none;\n}\n\n.elite-video-center .elite-video-select-wrap select {\n    display: block;\n    width: 100%;\n    min-height: 58px;\n    padding: 0 48px 0 17px;\n    border: 1px solid #d6e0dc;\n    border-radius: 9px;\n    outline: none;\n    background: #fff;\n    color: #333;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 600;\n    appearance: none;\n    -webkit-appearance: none;\n    cursor: pointer;\n}\n\n.elite-video-center .elite-video-select-wrap select:focus-visible {\n    outline: 2px solid #557e76;\n    outline-offset: 2px;\n}\n\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n\n    \/* =========================================================\n       01\uff5cYouTube PLAYLIST DATA\n    ========================================================= *\/\n\n    const playlistData = {\n\n\n        brand: {\n\n            en: \"BRAND STORIES\",\n\n            zh: \"\u54c1\u724c\u6545\u4e8b\",\n\n            playlist:\n                \"PLWJSpTI0LmKo\"\n\n        },\n\n\n        cooking: {\n\n            en: \"COOKING & INSPIRATION\",\n\n            zh: \"\u5be6\u969b\u4f7f\u7528\uff0f\u6599\u7406\u7bc4\u4f8b\",\n\n            playlist:\n                \"PLWhl7Bj8t7Hk\"\n\n        },\n\n\n        \"new-products\": {\n\n            en: \"NEW PRODUCTS & UNBOXING\",\n\n            zh: \"\u65b0\u54c1\u4e0a\u5e02\uff0f\u7522\u54c1\u958b\u7bb1\",\n\n            playlist:\n                \"PLQiw6M4elLrc\"\n\n        },\n\n\n        faq: {\n\n            en: \"FAQ\",\n\n            zh: \"\u5e38\u898b\u554f\u984c\",\n\n            playlist:\n                \"PLK7_49ZZ0WDA\"\n\n        },\n\n\n        care: {\n\n            en: \"CARE & MAINTENANCE\",\n\n            zh: \"\u6e05\u6f54\u4fdd\u990a\",\n\n            playlist:\n                \"PLAYJY9W6tdzY\"\n\n        },\n\n\n        \"how-to\": {\n\n            en: \"HOW TO\",\n\n            zh: \"\u64cd\u4f5c\u6559\u5b78\",\n\n            playlist:\n                \"PLPGXMuBWJtUo\"\n\n        },\n\n\n        \"glem-gas\": {\n\n            en: \"GLEM GAS\",\n\n            zh: \"\u7fa9\u5927\u5229\u7cbe\u54c1\u5eda\u96fb\",\n\n            playlist:\n                \"PLx4SpFk4I2FhWrmPZy2LLrF-yIh3o5JzT\"\n\n        },\n\n\n        product: {\n\n            en: \"PRODUCT INTRODUCTION\",\n\n            zh: \"\u7522\u54c1\u4ecb\u7d39\",\n\n            playlist:\n                \"PLx4SpFk4I2Fjd4Itrl7HAXjRhlwjpvBg6\"\n\n        },\n\n\n        \/* \u65b0\u589e\uff5c\u6d17\u7897\u6a5f\u7522\u54c1\u4ecb\u7d39 *\/\n        \"dishwashers\": {\n            en: \"DISHWASHERS\",\n            zh: \"\u6d17\u7897\u6a5f\u7522\u54c1\u4ecb\u7d39\",\n            playlist: \"PLTMSR6OLSk9U\"\n        },\n\n        \/* \u65b0\u589e\uff5c\u70e4\u7bb1\u3001\u84b8\u70e4\u7bb1\u3001\u5fae\u6ce2\u84b8\u70e4\u7bb1\u7522\u54c1\u4ecb\u7d39 *\/\n        \"ovens\": {\n            en: \"OVENS & COMBI OVENS\",\n            zh: \"\u70e4\u7bb1\u3001\u84b8\u70e4\u7bb1\u3001\u5fae\u6ce2\u84b8\u70e4\u7bb1\u7522\u54c1\u4ecb\u7d39\",\n            playlist: \"PLN0-lxkZG2bY\"\n        },\n\n        \/* \u65b0\u589e\uff5c\u611f\u61c9\u7210\u7522\u54c1\u4ecb\u7d39 *\/\n        \"induction\": {\n            en: \"INDUCTION COOKTOPS\",\n            zh: \"\u611f\u61c9\u7210\u7522\u54c1\u4ecb\u7d39\",\n            playlist: \"PLe_nP2w1cqCk\"\n        },\n\n        \/* \u65b0\u589e\uff5c\u62bd\u6cb9\u7159\u6a5f\u7522\u54c1\u4ecb\u7d39 *\/\n        \"hoods\": {\n            en: \"RANGE HOODS\",\n            zh: \"\u62bd\u6cb9\u7159\u6a5f\u7522\u54c1\u4ecb\u7d39\",\n            playlist: \"PLGqXUxzSDp9U\"\n        },\n\n        \/* \u65b0\u589e\uff5c\u6d17\u812b\u70d8\u8863\u6a5f\u7522\u54c1\u4ecb\u7d39 *\/\n        \"washers\": {\n            en: \"WASHER-DRYERS\",\n            zh: \"\u6d17\u812b\u70d8\u8863\u6a5f\u7522\u54c1\u4ecb\u7d39\",\n            playlist: \"PLHV0R_ZVmGpE\"\n        },\n\n        \/* \u65b0\u589e\uff5c\u7d05\u9152\u6ac3\u7522\u54c1\u4ecb\u7d39 *\/\n        \"wine\": {\n            en: \"WINE COOLERS\",\n            zh: \"\u7d05\u9152\u6ac3\u7522\u54c1\u4ecb\u7d39\",\n            playlist: \"PLH0ZVIjDG0aw\"\n        },\n\n        \/* \u65b0\u589e\uff5c\u51b0\u6c99\u6a5f\u7522\u54c1\u4ecb\u7d39 *\/\n        \"slush\": {\n            en: \"SLUSH MACHINES\",\n            zh: \"\u51b0\u6c99\u6a5f\u7522\u54c1\u4ecb\u7d39\",\n            playlist: \"PLZbCm-tjTJXA\"\n        },\n\n\n        baekjo: {\n\n            en: \"BAEKJO\",\n\n            zh: \"\u97d3\u570b\u6c34\u69fd\",\n\n            playlist:\n                \"PLx4SpFk4I2FgijDKgVV1S3n6E4Z7-DyaJ\"\n\n        },\n\n\n        lixil: {\n\n            en: \"LIXIL\",\n\n            zh: \"\u65e5\u672c\u539f\u88dd\u6c34\u69fd\u7cfb\u5217\",\n\n            playlist:\n                \"PLx4SpFk4I2Fg_v-2ApcPlPlMI0hDXqF4s\"\n\n        },\n\n\n        grohe: {\n\n            en: \"GROHE\",\n\n            zh: \"\u5fb7\u570b\u6c23\u6ce1\u6c34\u6a5f\u8207\u6de8\u6c34\u8a2d\u5099\",\n\n            playlist:\n                \"PLx4SpFk4I2FjhdgjDzQtlpV9pf_YPGCVJ\"\n\n        },\n\n\n        collaborations: {\n\n            en: \"FEATURED COLLABORATIONS\",\n\n            zh: \"\u540d\u4eba\u5408\u4f5c\",\n\n            playlist:\n                \"PLCA2yPxEdcfE\"\n\n        },\n\n\n        \"social-responsibility\": {\n\n            en: \"SOCIAL RESPONSIBILITY\",\n\n            zh: \"\u516c\u76ca\u8207\u56de\u994b\u793e\u6703\",\n\n            playlist:\n                \"PLKG_A5V7FA_s\"\n\n        }\n\n    };\n\n\n\n    \/* =========================================================\n       02\uff5cDOM\n    ========================================================= *\/\n\n    const categoryButtons =\n        document.querySelectorAll(\n            \"#eliteVideoCenter .elite-video-category\"\n        );\n\n\n    const mobileSelect =\n        document.getElementById(\n            \"eliteVideoSelect\"\n        );\n\n\n    const playerMount =\n        document.getElementById(\n            \"elitePlayerMount\"\n        );\n\n\n    const tvArea =\n        document.querySelector(\n            \"#eliteVideoCenter .elite-tv-area\"\n        );\n\n\n    const tvFrame =\n        document.getElementById(\n            \"eliteTvFrame\"\n        );\n\n\n    const playerStatus =\n        document.getElementById(\n            \"elitePlayerStatus\"\n        );\n\n\n    const categoryEn =\n        document.getElementById(\n            \"eliteCategoryEn\"\n        );\n\n\n    const categoryZh =\n        document.getElementById(\n            \"eliteCategoryZh\"\n        );\n\n\n    const nowPlaying =\n        document.getElementById(\n            \"eliteNowPlayingTitle\"\n        );\n\n\n    const prevButton =\n        document.getElementById(\n            \"elitePrevVideo\"\n        );\n\n\n    const nextButton =\n        document.getElementById(\n            \"eliteNextVideo\"\n        );\n\n\n    const prevTitle =\n        document.getElementById(\n            \"elitePrevTitle\"\n        );\n\n\n    const nextTitle =\n        document.getElementById(\n            \"eliteNextTitle\"\n        );\n\n\n    const playlistList =\n        document.getElementById(\n            \"elitePlaylistList\"\n        );\n\n\n    const playlistCount =\n        document.getElementById(\n            \"elitePlaylistCount\"\n        );\n\n\n\n    \/* =========================================================\n       03\uff5c\u72c0\u614b\n    ========================================================= *\/\n\n    let youtubeApiReady =\n        false;\n\n\n    let player =\n        null;\n\n\n    let currentCategory =\n        \"product\";\n\n\n    let currentIds =\n        [];\n\n\n    let currentIndex =\n        -1;\n\n\n    let loadToken =\n        0;\n\n\n    let playerSerial =\n        0;\n\n\n    const metadataCache =\n        new Map();\n\n\n\n    \/* =========================================================\n       04\uff5cWordPress REST API\n    ========================================================= *\/\n\n    function getRestRoot() {\n\n\n        const apiLink =\n            document.querySelector(\n                'link[rel=\"https:\/\/api.w.org\/\"]'\n            );\n\n\n        if (\n            apiLink &&\n            apiLink.href\n        ) {\n\n            return apiLink.href;\n\n        }\n\n\n        return (\n            window.location.origin\n            +\n            \"\/wp-json\/\"\n        );\n\n    }\n\n\n\n    const metadataEndpoint =\n\n        getRestRoot()\n        +\n        \"elite-video\/v1\/meta\";\n\n\n\n    \/* =========================================================\n       05\uff5c\u8f09\u5165 YouTube IFrame API\n    ========================================================= *\/\n\n    function loadYoutubeApi() {\n\n\n        if (\n            window.YT &&\n            window.YT.Player\n        ) {\n\n\n            youtubeApiReady =\n                true;\n\n\n            createCategoryPlayer(\n                currentCategory\n            );\n\n\n            return;\n\n        }\n\n\n\n        const previousCallback =\n            window.onYouTubeIframeAPIReady;\n\n\n\n        window.onYouTubeIframeAPIReady =\n            function () {\n\n\n                if (\n                    typeof previousCallback\n                    ===\n                    \"function\"\n                ) {\n\n                    previousCallback();\n\n                }\n\n\n                youtubeApiReady =\n                    true;\n\n\n                createCategoryPlayer(\n                    currentCategory\n                );\n\n            };\n\n\n\n        if (\n            !document.querySelector(\n                'script[src=\"https:\/\/www.youtube.com\/iframe_api\"]'\n            )\n        ) {\n\n\n            const script =\n                document.createElement(\n                    \"script\"\n                );\n\n\n            script.src =\n                \"https:\/\/www.youtube.com\/iframe_api\";\n\n\n            document.head.appendChild(\n                script\n            );\n\n        }\n\n    }\n\n\n\n    \/* =========================================================\n       06\uff5c\u9078\u64c7\u5206\u985e\n    ========================================================= *\/\n\n    function selectCategory(\n        categoryKey\n    ) {\n\n\n        const data =\n            playlistData[\n                categoryKey\n            ];\n\n\n        if (!data) {\n\n            return;\n\n        }\n\n\n        currentCategory =\n            categoryKey;\n\n\n\n        \/* Desktop Active *\/\n\n        categoryButtons.forEach(\n            function (button) {\n\n\n                button.classList.toggle(\n                    \"active\",\n                    button.dataset.category\n                    ===\n                    categoryKey\n                );\n\n            }\n        );\n\n\n\n        \/* Mobile *\/\n\n        if (mobileSelect) {\n\n            mobileSelect.value =\n                categoryKey;\n\n        }\n\n\n\n        \/* \u5206\u985e\u6a19\u984c *\/\n\n        categoryEn.textContent =\n            data.en;\n\n\n        categoryZh.textContent =\n            data.zh;\n\n\n\n        if (youtubeApiReady) {\n\n            createCategoryPlayer(\n                categoryKey\n            );\n\n        }\n\n    }\n\n\n\n    \/* =========================================================\n       07\uff5c\u5efa\u7acb\u65b0\u7684 YouTube Player\n    ========================================================= *\/\n\n    function createCategoryPlayer(\n        categoryKey\n    ) {\n\n\n        const data =\n            playlistData[\n                categoryKey\n            ];\n\n\n        if (!data) {\n\n            return;\n\n        }\n\n\n        const token =\n            ++loadToken;\n\n\n        showLoading();\n\n\n        currentIds = [];\n\n        currentIndex =\n            -1;\n\n\n\n        \/* =====================================================\n           \u92b7\u6bc0\u820a Player\n        ===================================================== *\/\n\n        if (player) {\n\n\n            try {\n\n                player.destroy();\n\n            } catch (error) {\n            }\n\n\n            player = null;\n\n        }\n\n\n\n        playerMount.innerHTML =\n            \"\";\n\n\n\n        \/* =====================================================\n           \u5efa\u7acb\u65b0 Player DIV\n        ===================================================== *\/\n\n        playerSerial++;\n\n\n        const playerId =\n            \"eliteYoutubePlayer_\"\n            +\n            playerSerial;\n\n\n        const playerElement =\n            document.createElement(\n                \"div\"\n            );\n\n\n        playerElement.id =\n            playerId;\n\n\n        playerMount.appendChild(\n            playerElement\n        );\n\n\n\n        \/* =====================================================\n           \u5efa\u7acb YT PLAYER\n        ===================================================== *\/\n\n        player =\n            new YT.Player(\n                playerId,\n                {\n\n                    width:\n                        \"100%\",\n\n                    height:\n                        \"100%\",\n\n\n                    playerVars: {\n\n                        listType:\n                            \"playlist\",\n\n                        list:\n                            data.playlist,\n\n                        rel:\n                            0,\n\n                        playsinline:\n                            1,\n\n                        origin:\n                            window.location.origin\n\n                    },\n\n\n                    events: {\n\n\n                        onReady:\n                            function () {\n\n\n                                if (\n                                    token !==\n                                    loadToken\n                                ) {\n\n                                    return;\n\n                                }\n\n\n\n                                try {\n\n\n                                    player\n                                        .getIframe()\n                                        .setAttribute(\n                                            \"referrerpolicy\",\n                                            \"strict-origin-when-cross-origin\"\n                                        );\n\n\n                                } catch (error) {\n                                }\n\n\n\n                                waitForPlaylist(\n                                    token,\n                                    0\n                                );\n\n                            },\n\n\n                        onStateChange:\n                            function () {\n\n\n                                if (\n                                    token !==\n                                    loadToken\n                                ) {\n\n                                    return;\n\n                                }\n\n\n                                syncCurrentVideo();\n\n                            },\n\n\n                        onError:\n                            function () {\n\n\n                                \/*\n                                   \u7531 waitForPlaylist\n                                   \u6700\u5f8c\u5224\u65b7\n                                *\/\n\n                            }\n\n                    }\n\n                }\n            );\n\n    }\n\n\n\n    \/* =========================================================\n       08\uff5c\u7b49\u5f85\u64ad\u653e\u6e05\u55ae\n    ========================================================= *\/\n\n    function waitForPlaylist(\n        token,\n        attempt\n    ) {\n\n\n        if (\n            token !==\n            loadToken\n        ) {\n\n            return;\n\n        }\n\n\n        let ids =\n            [];\n\n\n        try {\n\n\n            const result =\n                player.getPlaylist();\n\n\n            if (\n                Array.isArray(\n                    result\n                )\n            ) {\n\n\n                ids =\n                    result.filter(\n                        Boolean\n                    );\n\n            }\n\n\n        } catch (error) {\n\n\n            ids = [];\n\n        }\n\n\n\n        \/* =====================================================\n           \u6709\u5f71\u7247\n        ===================================================== *\/\n\n        if (\n            ids.length > 0\n        ) {\n\n\n            playlistLoaded(\n                ids,\n                token\n            );\n\n\n            return;\n\n        }\n\n\n\n        \/* =====================================================\n           \u7e7c\u7e8c\u7b49\n        ===================================================== *\/\n\n        if (\n            attempt < 28\n        ) {\n\n\n            setTimeout(\n                function () {\n\n\n                    waitForPlaylist(\n                        token,\n                        attempt + 1\n                    );\n\n                },\n                250\n            );\n\n\n            return;\n\n        }\n\n\n\n        \/* =====================================================\n           \u6c92\u6709\u5f71\u7247\n        ===================================================== *\/\n\n        showEmptyPlaylist();\n\n    }\n\n\n\n    \/* =========================================================\n       09\uff5c\u64ad\u653e\u6e05\u55ae\u8f09\u5165\u5b8c\u6210\n    ========================================================= *\/\n\n    function playlistLoaded(\n        ids,\n        token\n    ) {\n\n\n        if (\n            token !==\n            loadToken\n        ) {\n\n            return;\n\n        }\n\n\n        currentIds =\n            ids;\n\n\n        currentIndex =\n            0;\n\n\n\n        try {\n\n\n            const index =\n                player.getPlaylistIndex();\n\n\n            if (\n                index >= 0\n            ) {\n\n\n                currentIndex =\n                    index;\n\n            }\n\n\n        } catch (error) {\n        }\n\n\n\n        tvFrame.classList.remove(\n            \"is-loading\",\n            \"is-empty\"\n        );\n\n\n        playlistCount.textContent =\n            currentIds.length\n            +\n            \" \u90e8\u5f71\u7247\";\n\n\n        renderPlaylist();\n\n\n        updateCurrentDisplay();\n\n\n        loadMetadata(\n            currentIds,\n            token\n        );\n\n    }\n\n\n\n    \/* =========================================================\n       10\uff5c\u6293\u5f71\u7247\u540d\u7a31\u8207\u7e2e\u5716\n    ========================================================= *\/\n\n    async function loadMetadata(\n        ids,\n        token\n    ) {\n\n\n        const missingIds =\n            ids.filter(\n                function (id) {\n\n\n                    return (\n                        !metadataCache.has(\n                            id\n                        )\n                    );\n\n                }\n            );\n\n\n        if (\n            missingIds.length === 0\n        ) {\n\n\n            renderPlaylist();\n\n            updateCurrentDisplay();\n\n\n            return;\n\n        }\n\n\n\n        try {\n\n\n            const response =\n                await fetch(\n                    metadataEndpoint,\n                    {\n\n                        method:\n                            \"POST\",\n\n                        headers: {\n\n                            \"Content-Type\":\n                                \"application\/json\"\n\n                        },\n\n                        body:\n                            JSON.stringify({\n\n                                ids:\n                                    missingIds\n\n                            })\n\n                    }\n                );\n\n\n            if (!response.ok) {\n\n\n                throw new Error(\n                    \"Metadata Error\"\n                );\n\n            }\n\n\n\n            const result =\n                await response.json();\n\n\n            const items =\n                result.items || {};\n\n\n            Object.keys(\n                items\n            ).forEach(\n                function (id) {\n\n\n                    metadataCache.set(\n                        id,\n                        items[id]\n                    );\n\n                }\n            );\n\n\n        } catch (error) {\n\n\n            console.warn(\n                \"YouTube metadata:\",\n                error\n            );\n\n        }\n\n\n\n        if (\n            token !==\n            loadToken\n        ) {\n\n            return;\n\n        }\n\n\n        renderPlaylist();\n\n\n        updateCurrentDisplay();\n\n    }\n\n\n\n    \/* =========================================================\n       11\uff5c\u55ae\u652f\u5f71\u7247\u8cc7\u6599\n    ========================================================= *\/\n\n    function getVideoMeta(\n        id,\n        index\n    ) {\n\n\n        if (\n            metadataCache.has(\n                id\n            )\n        ) {\n\n\n            return metadataCache.get(\n                id\n            );\n\n        }\n\n\n        return {\n\n            id:\n                id,\n\n            title:\n                \"\u5f71\u7247 \"\n                +\n                String(\n                    index + 1\n                ).padStart(\n                    2,\n                    \"0\"\n                ),\n\n            thumbnail:\n                \"https:\/\/i.ytimg.com\/vi\/\"\n                +\n                id\n                +\n                \"\/hqdefault.jpg\"\n\n        };\n\n    }\n\n\n\n    \/* =========================================================\n       12\uff5c\u5efa\u7acb\u64ad\u653e\u6e05\u55ae\u5361\u7247\n    ========================================================= *\/\n\n    function renderPlaylist() {\n\n\n        playlistList.innerHTML =\n            \"\";\n\n\n        if (\n            currentIds.length === 0\n        ) {\n\n\n            playlistList.innerHTML =\n\n                '<div class=\"elite-playlist-empty\">'\n                +\n                '\u76ee\u524d\u6c92\u6709\u5f71\u7247'\n                +\n                '<\/div>';\n\n\n            return;\n\n        }\n\n\n\n        currentIds.forEach(\n            function (\n                id,\n                index\n            ) {\n\n\n                const meta =\n                    getVideoMeta(\n                        id,\n                        index\n                    );\n\n\n                const button =\n                    document.createElement(\n                        \"button\"\n                    );\n\n\n                button.type =\n                    \"button\";\n\n\n                button.className =\n                    \"elite-playlist-item\";\n\n\n                if (\n                    index ===\n                    currentIndex\n                ) {\n\n\n                    button.classList.add(\n                        \"active\"\n                    );\n\n                }\n\n\n\n                \/* Thumbnail *\/\n\n                const thumb =\n                    document.createElement(\n                        \"div\"\n                    );\n\n\n                thumb.className =\n                    \"elite-playlist-thumb\";\n\n\n                const image =\n                    document.createElement(\n                        \"img\"\n                    );\n\n\n                image.src =\n                    meta.thumbnail;\n\n\n                image.alt =\n                    meta.title;\n\n\n                image.loading =\n                    \"lazy\";\n\n\n                thumb.appendChild(\n                    image\n                );\n\n\n\n                \/* Info *\/\n\n                const info =\n                    document.createElement(\n                        \"div\"\n                    );\n\n\n                info.className =\n                    \"elite-playlist-info\";\n\n\n                const number =\n                    document.createElement(\n                        \"div\"\n                    );\n\n\n                number.className =\n                    \"elite-playlist-number\";\n\n\n                number.textContent =\n                    String(\n                        index + 1\n                    ).padStart(\n                        2,\n                        \"0\"\n                    );\n\n\n                const title =\n                    document.createElement(\n                        \"div\"\n                    );\n\n\n                title.className =\n                    \"elite-playlist-title\";\n\n\n                title.textContent =\n                    meta.title;\n\n\n                info.appendChild(\n                    number\n                );\n\n\n                info.appendChild(\n                    title\n                );\n\n\n                button.appendChild(\n                    thumb\n                );\n\n\n                button.appendChild(\n                    info\n                );\n\n\n\n                \/* =================================================\n                   \u9ede\u64ad\u653e\u6e05\u55ae\n                   \u64ad\u653e + \u81ea\u52d5\u6ed1\u56de TV\n                ================================================= *\/\n\n                button.addEventListener(\n                    \"click\",\n                    function () {\n\n\n                        playVideoAt(\n                            index,\n                            true\n                        );\n\n                    }\n                );\n\n\n                playlistList.appendChild(\n                    button\n                );\n\n            }\n        );\n\n    }\n\n\n\n    \/* =========================================================\n       13\uff5c\u64ad\u653e\u6307\u5b9a\u5f71\u7247\n    ========================================================= *\/\n\n    function playVideoAt(\n        index,\n        scrollToTv\n    ) {\n\n\n        if (\n            index < 0 ||\n            index >=\n            currentIds.length\n        ) {\n\n            return;\n\n        }\n\n\n        currentIndex =\n            index;\n\n\n\n        try {\n\n\n            player.playVideoAt(\n                index\n            );\n\n\n        } catch (error) {\n\n\n            return;\n\n        }\n\n\n\n        renderPlaylist();\n\n\n        updateCurrentDisplay();\n\n\n\n        \/* =====================================================\n           \u662f\u5426\u56de\u5230\u96fb\u8996\n        ===================================================== *\/\n\n        if (\n            scrollToTv === true\n        ) {\n\n\n            setTimeout(\n                function () {\n\n\n                    scrollBackToTv();\n\n\n                },\n                120\n            );\n\n        }\n\n    }\n\n\n\n    \/* =========================================================\n       14\uff5c\u81ea\u52d5\u6ed1\u56de\u96fb\u8996\n    ========================================================= *\/\n\n    function scrollBackToTv() {\n\n\n        if (!tvArea) {\n\n            return;\n\n        }\n\n\n        const headerOffset =\n\n            window.innerWidth <= 767\n                ?\n                75\n                :\n                105;\n\n\n\n        const position =\n\n            tvArea\n                .getBoundingClientRect()\n                .top\n\n            +\n\n            window.pageYOffset\n\n            -\n\n            headerOffset;\n\n\n\n        window.scrollTo({\n\n            top:\n                Math.max(\n                    position,\n                    0\n                ),\n\n            behavior:\n                \"smooth\"\n\n        });\n\n    }\n\n\n\n    \/* =========================================================\n       15\uff5c\u540c\u6b65 YouTube \u73fe\u5728\u64ad\u653e\n    ========================================================= *\/\n\n    function syncCurrentVideo() {\n\n\n        if (\n            !player ||\n            currentIds.length === 0\n        ) {\n\n            return;\n\n        }\n\n\n        let index =\n            -1;\n\n\n        try {\n\n\n            index =\n                player.getPlaylistIndex();\n\n\n        } catch (error) {\n\n\n            return;\n\n        }\n\n\n        if (\n            index < 0 ||\n            index >=\n            currentIds.length\n        ) {\n\n            return;\n\n        }\n\n\n        if (\n            index !==\n            currentIndex\n        ) {\n\n\n            currentIndex =\n                index;\n\n\n            renderPlaylist();\n\n\n            updateCurrentDisplay();\n\n        }\n\n    }\n\n\n\n    \/* =========================================================\n       16\uff5cNow \/ Previous \/ Next\n    ========================================================= *\/\n\n    function updateCurrentDisplay() {\n\n\n        if (\n            currentIds.length === 0 ||\n            currentIndex < 0\n        ) {\n\n\n            nowPlaying.textContent =\n                \"\u76ee\u524d\u6c92\u6709\u5f71\u7247\";\n\n\n            prevTitle.textContent =\n                \"\u76ee\u524d\u6c92\u6709\u5f71\u7247\";\n\n\n            nextTitle.textContent =\n                \"\u76ee\u524d\u6c92\u6709\u5f71\u7247\";\n\n\n            prevButton.disabled =\n                true;\n\n\n            nextButton.disabled =\n                true;\n\n\n            return;\n\n        }\n\n\n\n        \/* Current *\/\n\n        const currentMeta =\n            getVideoMeta(\n\n                currentIds[\n                    currentIndex\n                ],\n\n                currentIndex\n\n            );\n\n\n        nowPlaying.textContent =\n            currentMeta.title;\n\n\n\n        \/* Previous *\/\n\n        if (\n            currentIndex > 0\n        ) {\n\n\n            const previousMeta =\n                getVideoMeta(\n\n                    currentIds[\n                        currentIndex - 1\n                    ],\n\n                    currentIndex - 1\n\n                );\n\n\n            prevTitle.textContent =\n                previousMeta.title;\n\n\n            prevButton.disabled =\n                false;\n\n\n        } else {\n\n\n            prevTitle.textContent =\n                \"\u5df2\u662f\u7b2c\u4e00\u652f\u5f71\u7247\";\n\n\n            prevButton.disabled =\n                true;\n\n        }\n\n\n\n        \/* Next *\/\n\n        if (\n            currentIndex <\n            currentIds.length - 1\n        ) {\n\n\n            const nextMeta =\n                getVideoMeta(\n\n                    currentIds[\n                        currentIndex + 1\n                    ],\n\n                    currentIndex + 1\n\n                );\n\n\n            nextTitle.textContent =\n                nextMeta.title;\n\n\n            nextButton.disabled =\n                false;\n\n\n        } else {\n\n\n            nextTitle.textContent =\n                \"\u5df2\u662f\u6700\u5f8c\u4e00\u652f\u5f71\u7247\";\n\n\n            nextButton.disabled =\n                true;\n\n        }\n\n    }\n\n\n\n    \/* =========================================================\n       17\uff5cLoading\n    ========================================================= *\/\n\n    function showLoading() {\n\n\n        tvFrame.classList.remove(\n            \"is-empty\"\n        );\n\n\n        tvFrame.classList.add(\n            \"is-loading\"\n        );\n\n\n        playerStatus.textContent =\n            \"\u5f71\u7247\u8f09\u5165\u4e2d\u2026\";\n\n\n        playlistCount.textContent =\n            \"\u8f09\u5165\u4e2d\u2026\";\n\n\n        playlistList.innerHTML =\n\n            '<div class=\"elite-playlist-empty\">'\n            +\n            '\u5f71\u7247\u8f09\u5165\u4e2d\u2026'\n            +\n            '<\/div>';\n\n\n        nowPlaying.textContent =\n            \"\u5f71\u7247\u8f09\u5165\u4e2d\u2026\";\n\n\n        prevTitle.textContent =\n            \"\u5f71\u7247\u8f09\u5165\u4e2d\u2026\";\n\n\n        nextTitle.textContent =\n            \"\u5f71\u7247\u8f09\u5165\u4e2d\u2026\";\n\n\n        prevButton.disabled =\n            true;\n\n\n        nextButton.disabled =\n            true;\n\n    }\n\n\n\n    \/* =========================================================\n       18\uff5c\u6c92\u6709\u5f71\u7247\n    ========================================================= *\/\n\n    function showEmptyPlaylist() {\n\n\n        currentIds =\n            [];\n\n\n        currentIndex =\n            -1;\n\n\n        tvFrame.classList.remove(\n            \"is-loading\"\n        );\n\n\n        tvFrame.classList.add(\n            \"is-empty\"\n        );\n\n\n        playerStatus.textContent =\n            \"\u76ee\u524d\u6c92\u6709\u5f71\u7247\";\n\n\n        playlistCount.textContent =\n            \"0 \u90e8\u5f71\u7247\";\n\n\n        playlistList.innerHTML =\n\n            '<div class=\"elite-playlist-empty\">'\n            +\n            '\u76ee\u524d\u6c92\u6709\u5f71\u7247'\n            +\n            '<\/div>';\n\n\n        nowPlaying.textContent =\n            \"\u76ee\u524d\u6c92\u6709\u5f71\u7247\";\n\n\n        prevTitle.textContent =\n            \"\u76ee\u524d\u6c92\u6709\u5f71\u7247\";\n\n\n        nextTitle.textContent =\n            \"\u76ee\u524d\u6c92\u6709\u5f71\u7247\";\n\n\n        prevButton.disabled =\n            true;\n\n\n        nextButton.disabled =\n            true;\n\n    }\n\n\n\n    \/* =========================================================\n       19\uff5c\u4e0a\u4e00\u5247\n    ========================================================= *\/\n\n    prevButton.addEventListener(\n        \"click\",\n        function () {\n\n\n            if (\n                currentIndex > 0\n            ) {\n\n\n                playVideoAt(\n                    currentIndex - 1,\n                    false\n                );\n\n            }\n\n        }\n    );\n\n\n\n    \/* =========================================================\n       20\uff5c\u4e0b\u4e00\u5247\n    ========================================================= *\/\n\n    nextButton.addEventListener(\n        \"click\",\n        function () {\n\n\n            if (\n                currentIndex <\n                currentIds.length - 1\n            ) {\n\n\n                playVideoAt(\n                    currentIndex + 1,\n                    false\n                );\n\n            }\n\n        }\n    );\n\n\n\n    \/* =========================================================\n       21\uff5c\u684c\u6a5f\u5206\u985e\n    ========================================================= *\/\n\n    categoryButtons.forEach(\n        function (button) {\n\n\n            button.addEventListener(\n                \"click\",\n                function () {\n\n\n                    selectCategory(\n                        button.dataset.category\n                    );\n\n                }\n            );\n\n        }\n    );\n\n\n\n    \/* =========================================================\n       22\uff5c\u624b\u6a5f\u5206\u985e\n    ========================================================= *\/\n\n    if (mobileSelect) {\n\n\n        mobileSelect.addEventListener(\n            \"change\",\n            function () {\n\n\n                selectCategory(\n                    mobileSelect.value\n                );\n\n\n                setTimeout(\n                    function () {\n\n\n                        const target =\n                            document.querySelector(\n                                \"#eliteVideoCenter .elite-video-current-category\"\n                            );\n\n\n                        if (target) {\n\n\n                            target.scrollIntoView({\n\n                                behavior:\n                                    \"smooth\",\n\n                                block:\n                                    \"start\"\n\n                            });\n\n                        }\n\n                    },\n                    100\n                );\n\n            }\n        );\n\n    }\n\n\n\n    \/* =========================================================\n       23\uff5c\u555f\u52d5\n    ========================================================= *\/\n\n    selectCategory(\n        \"product\"\n    );\n\n\n    loadYoutubeApi();\n\n\n});\n<\/script>\n\n<!-- =========================================================\n     ELITE\uff5cVIDEO CENTER\n     \u4fdd\u7559\u539f\u59cb\u80cc\u666f\u3001TV \u64ad\u653e\u5668\u3001\u5f71\u7247\u6e05\u55ae\uff0c\u65b0\u589e 7 \u5927\u7522\u54c1\u5206\u985e\n========================================================= -->\n\n<section class=\"elite-video-center\" id=\"eliteVideoCenter\">\n\n    <div class=\"elite-video-container\">\n\n        <!-- =================================================\n             \u6a19\u984c\n        ================================================== -->\n\n        <header class=\"elite-video-heading\">\n            <span class=\"elite-video-kicker\">VIDEO CENTER<\/span>\n            <h2>\u5f71\u97f3\u5c08\u5340<\/h2>\n            <p>\u63a2\u7d22\u54c1\u724c\u6545\u4e8b\u3001\u7522\u54c1\u4ecb\u7d39\u3001\u64cd\u4f5c\u6559\u5b78\u3001\u6599\u7406\u9748\u611f\u8207\u66f4\u591a\u7cbe\u5f69\u5167\u5bb9<\/p>\n        <\/header>\n\n        <!-- =================================================\n             \u96fb\u8166\u7248\uff0f\u624b\u6a5f\u7248\u5171\u7528\u4e0b\u62c9\u5f0f\u5206\u985e\uff0820 \u985e\uff09\n        ================================================== -->\n\n        <div class=\"elite-video-mobile-category\">\n            <label for=\"eliteVideoSelect\">VIDEO CATEGORY\uff5c\u5f71\u7247\u5206\u985e<\/label>\n            <div class=\"elite-video-select-wrap\">\n                <select id=\"eliteVideoSelect\">\n                    <option value=\"brand\">\n                        BRAND STORIES\uff5c\u54c1\u724c\u6545\u4e8b\n                    <\/option>\n\n                    <option value=\"cooking\">\n                        COOKING &amp; INSPIRATION\uff5c\u5be6\u969b\u4f7f\u7528\uff0f\u6599\u7406\u7bc4\u4f8b\n                    <\/option>\n\n                    <option value=\"new-products\">\n                        NEW PRODUCTS &amp; UNBOXING\uff5c\u65b0\u54c1\u4e0a\u5e02\uff0f\u7522\u54c1\u958b\u7bb1\n                    <\/option>\n\n                    <option value=\"faq\">\n                        FAQ\uff5c\u5e38\u898b\u554f\u984c\n                    <\/option>\n\n                    <option value=\"care\">\n                        CARE &amp; MAINTENANCE\uff5c\u6e05\u6f54\u4fdd\u990a\n                    <\/option>\n\n                    <option value=\"how-to\">\n                        HOW TO\uff5c\u64cd\u4f5c\u6559\u5b78\n                    <\/option>\n\n                    <option value=\"glem-gas\">\n                        GLEM GAS\uff5c\u7fa9\u5927\u5229\u7cbe\u54c1\u5eda\u96fb\n                    <\/option>\n\n                    <option value=\"product\" selected>\n                        PRODUCT INTRODUCTION\uff5c\u7522\u54c1\u4ecb\u7d39\n                    <\/option>\n\n                    <option value=\"dishwashers\">\n                        DISHWASHERS\uff5c\u6d17\u7897\u6a5f\u7522\u54c1\u4ecb\u7d39\n                    <\/option>\n\n                    <option value=\"ovens\">\n                        OVENS &amp; COMBI OVENS\uff5c\u70e4\u7bb1\u3001\u84b8\u70e4\u7bb1\u3001\u5fae\u6ce2\u84b8\u70e4\u7bb1\u7522\u54c1\u4ecb\u7d39\n                    <\/option>\n\n                    <option value=\"induction\">\n                        INDUCTION COOKTOPS\uff5c\u611f\u61c9\u7210\u7522\u54c1\u4ecb\u7d39\n                    <\/option>\n\n                    <option value=\"hoods\">\n                        RANGE HOODS\uff5c\u62bd\u6cb9\u7159\u6a5f\u7522\u54c1\u4ecb\u7d39\n                    <\/option>\n\n                    <option value=\"washers\">\n                        WASHER-DRYERS\uff5c\u6d17\u812b\u70d8\u8863\u6a5f\u7522\u54c1\u4ecb\u7d39\n                    <\/option>\n\n                    <option value=\"wine\">\n                        WINE COOLERS\uff5c\u7d05\u9152\u6ac3\u7522\u54c1\u4ecb\u7d39\n                    <\/option>\n\n                    <option value=\"slush\">\n                        SLUSH MACHINES\uff5c\u51b0\u6c99\u6a5f\u7522\u54c1\u4ecb\u7d39\n                    <\/option>\n\n                    <option value=\"baekjo\">\n                        BAEKJO\uff5c\u97d3\u570b\u6c34\u69fd\n                    <\/option>\n\n                    <option value=\"lixil\">\n                        LIXIL\uff5c\u65e5\u672c\u539f\u88dd\u6c34\u69fd\u7cfb\u5217\n                    <\/option>\n\n                    <option value=\"grohe\">\n                        GROHE\uff5c\u5fb7\u570b\u6c23\u6ce1\u6c34\u6a5f\u8207\u6de8\u6c34\u8a2d\u5099\n                    <\/option>\n\n                    <option value=\"collaborations\">\n                        FEATURED COLLABORATIONS\uff5c\u540d\u4eba\u5408\u4f5c\n                    <\/option>\n\n                    <option value=\"social-responsibility\">\n                        SOCIAL RESPONSIBILITY\uff5c\u516c\u76ca\u8207\u56de\u994b\u793e\u6703\n                    <\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n\n        <!-- =================================================\n             \u76ee\u524d\u5206\u985e\n        ================================================== -->\n\n        <div class=\"elite-video-current-category\">\n            <span id=\"eliteCategoryEn\">PRODUCT INTRODUCTION<\/span>\n            <h3 id=\"eliteCategoryZh\">\u7522\u54c1\u4ecb\u7d39<\/h3>\n        <\/div>\n\n        <!-- =================================================\n             \u539f\u672c\u7684\u9ed1\u8272 TV\uff08\u4e0d\u8b8a\uff09\n        ================================================== -->\n\n        <div class=\"elite-tv-area\">\n            <div class=\"elite-tv-frame is-loading\" id=\"eliteTvFrame\">\n                <div class=\"elite-tv-screen\">\n                    <div class=\"elite-player-mount\" id=\"elitePlayerMount\"><\/div>\n                    <div class=\"elite-player-status\" id=\"elitePlayerStatus\">\u5f71\u7247\u8f09\u5165\u4e2d\u2026<\/div>\n                <\/div>\n                <div class=\"elite-tv-bottom\">\n                    <span class=\"elite-tv-brand\">ELITE VIDEO<\/span>\n                    <span class=\"elite-tv-light\"><\/span>\n                <\/div>\n            <\/div>\n            <div class=\"elite-tv-stand\">\n                <div class=\"elite-tv-neck\"><\/div>\n                <div class=\"elite-tv-base\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- =================================================\n             \u73fe\u5728\u64ad\u653e\n        ================================================== -->\n\n        <div class=\"elite-now-playing\">\n            <span>NOW PLAYING\uff5c\u73fe\u5728\u64ad\u653e<\/span>\n            <h3 id=\"eliteNowPlayingTitle\">\u5f71\u7247\u8f09\u5165\u4e2d\u2026<\/h3>\n        <\/div>\n\n        <!-- =================================================\n             \u4e0a\u4e00\u5247 \/ \u4e0b\u4e00\u5247\n        ================================================== -->\n\n        <div class=\"elite-video-navigation\">\n            <button type=\"button\" class=\"elite-video-nav\" id=\"elitePrevVideo\" disabled>\n                <span>\u2190 PREVIOUS\uff5c\u4e0a\u4e00\u5247<\/span>\n                <strong id=\"elitePrevTitle\">\u76ee\u524d\u6c92\u6709\u5f71\u7247<\/strong>\n            <\/button>\n            <button type=\"button\" class=\"elite-video-nav elite-video-nav-next\" id=\"eliteNextVideo\" disabled>\n                <span>NEXT\uff5c\u4e0b\u4e00\u5247 \u2192<\/span>\n                <strong id=\"eliteNextTitle\">\u76ee\u524d\u6c92\u6709\u5f71\u7247<\/strong>\n            <\/button>\n        <\/div>\n\n        <!-- =================================================\n             \u64ad\u653e\u6e05\u55ae\uff08\u539f\u672c\u7684\u7e2e\u5716\u5361\u7247\u4e0d\u8b8a\uff09\n        ================================================== -->\n\n        <section class=\"elite-playlist-section\">\n            <div class=\"elite-playlist-heading\">\n                <div>\n                    <span>PLAYLIST<\/span>\n                    <h3>\u64ad\u653e\u6e05\u55ae<\/h3>\n                <\/div>\n                <span class=\"elite-playlist-count\" id=\"elitePlaylistCount\">0 \u90e8\u5f71\u7247<\/span>\n            <\/div>\n            <div class=\"elite-playlist-grid\" id=\"elitePlaylistList\">\n                <div class=\"elite-playlist-empty\">\u5f71\u7247\u8f09\u5165\u4e2d\u2026<\/div>\n            <\/div>\n        <\/section>\n\n    <\/div>\n\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>VIDEO CENTER \u5f71\u97f3\u5c08\u5340 \u63a2\u7d22\u54c1\u724c\u6545\u4e8b\u3001\u7522\u54c1\u4ecb\u7d39\u3001\u64cd\u4f5c\u6559\u5b78\u3001\u6599\u7406\u9748\u611f\u8207\u66f4\u591a\u7cbe\u5f69\u5167\u5bb9 VIDEO CA&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-1058","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"glemgasadmin","author_link":"https:\/\/www.elite-household.com\/en\/author\/glemgasadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"VIDEO CENTER \u5f71\u97f3\u5c08\u5340 \u63a2\u7d22\u54c1\u724c\u6545\u4e8b\u3001\u7522\u54c1\u4ecb\u7d39\u3001\u64cd\u4f5c\u6559\u5b78\u3001\u6599\u7406\u9748\u611f\u8207\u66f4\u591a\u7cbe\u5f69\u5167\u5bb9 VIDEO CA&hellip;","_links":{"self":[{"href":"https:\/\/www.elite-household.com\/en\/wp-json\/wp\/v2\/pages\/1058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elite-household.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.elite-household.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.elite-household.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elite-household.com\/en\/wp-json\/wp\/v2\/comments?post=1058"}],"version-history":[{"count":19,"href":"https:\/\/www.elite-household.com\/en\/wp-json\/wp\/v2\/pages\/1058\/revisions"}],"predecessor-version":[{"id":1658,"href":"https:\/\/www.elite-household.com\/en\/wp-json\/wp\/v2\/pages\/1058\/revisions\/1658"}],"wp:attachment":[{"href":"https:\/\/www.elite-household.com\/en\/wp-json\/wp\/v2\/media?parent=1058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}