{"id":248,"date":"2026-02-09T09:09:35","date_gmt":"2026-02-09T09:09:35","guid":{"rendered":"http:\/\/localhost\/256-youth-platform\/?page_id=248"},"modified":"2026-02-09T09:09:36","modified_gmt":"2026-02-09T09:09:36","slug":"video-gallery","status":"publish","type":"page","link":"https:\/\/lwegatech.net\/256\/video-gallery\/","title":{"rendered":"Video Gallery"},"content":{"rendered":"\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">    <div class=\"alpha-video-gallery-shortcode\" style=\"text-align: center; padding-top: 3rem;\">\n        <div class=\"row g-4 justify-content-center\">\n                            <div class=\"col-lg-4 col-md-6\" data-video-id=\"396\">\n                    <div class=\"alpha-video-card\" onclick=\"openVideoModal(396)\" style=\"background: var(--kpy-white, #ffffff); border-radius: 12px; box-shadow: 0 4px 20px rgba(var(--kpy-primary-rgb, 23, 74, 143), 0.15); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; cursor: pointer;\">\n                        <div class=\"alpha-video-thumbnail\" style=\"position: relative; width: 100%; padding-top: 56.25%; background: var(--kpy-base, #000000); overflow: hidden;\">\n                                                            <img decoding=\"async\" src=\"https:\/\/lwegatech.net\/256\/wp-content\/uploads\/2026\/01\/Un-groupe-de-personnes-posant-pour-une-photo-avec-le-soleil-derriere-elles-_-Image-Premium-generee-a-base-dIA.jpg\" alt=\"Choosing the right career\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;\" \/>\n                                                        <div class=\"alpha-video-play-overlay\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease;\">\n                                <div class=\"alpha-play-button\" style=\"width: 70px; height: 70px; background: rgba(255, 255, 255, 0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kpy-primary, #17458F); font-size: 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\">\n                                    <i class=\"bi bi-play-fill\" style=\"margin-left: 4px;\"><\/i>\n                                <\/div>\n                            <\/div>\n                                                            <div class=\"alpha-video-duration\" style=\"position: absolute; bottom: 12px; right: 12px; background: rgba(0, 0, 0, 0.85); color: var(--kpy-white, #ffffff); padding: 0.3rem 0.8rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; backdrop-filter: blur(4px);\">\n                                    10:36                                <\/div>\n                                                    <\/div>\n                        <div class=\"alpha-video-card-body\" style=\"padding: 1.5rem;\">\n                            <h4 class=\"alpha-video-title\" style=\"color: var(--kpy-base, #000000); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.3;\">Choosing the right career<\/h4>\n                            <p class=\"alpha-video-excerpt\" style=\"color: var(--kpy-grey, #666666); font-size: 0.95rem; line-height: 1.6; margin-bottom: 0;\"><\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"alpha-video-data\" style=\"display:none;\"\n                         data-video-type=\"youtube\"\n                         data-video-url=\"https:\/\/www.youtube.com\/watch?v=oy6yDAFsJxI&amp;list=PLWPirh4EWFpF6kRQ39VFv1EmGeHVkNqK1&amp;index=2\"\n                         data-embed-code=\"\"\n                         data-embed-url=\"https:\/\/www.youtube.com\/embed\/oy6yDAFsJxI\"><\/div>\n                <\/div>\n                            <div class=\"col-lg-4 col-md-6\" data-video-id=\"395\">\n                    <div class=\"alpha-video-card\" onclick=\"openVideoModal(395)\" style=\"background: var(--kpy-white, #ffffff); border-radius: 12px; box-shadow: 0 4px 20px rgba(var(--kpy-primary-rgb, 23, 74, 143), 0.15); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; cursor: pointer;\">\n                        <div class=\"alpha-video-thumbnail\" style=\"position: relative; width: 100%; padding-top: 56.25%; background: var(--kpy-base, #000000); overflow: hidden;\">\n                                                            <img decoding=\"async\" src=\"https:\/\/lwegatech.net\/256\/wp-content\/uploads\/2026\/01\/Un-groupe-de-personnes-posant-pour-une-photo-avec-le-soleil-derriere-elles-_-Image-Premium-generee-a-base-dIA.jpg\" alt=\"Finding Your Passion\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;\" \/>\n                                                        <div class=\"alpha-video-play-overlay\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease;\">\n                                <div class=\"alpha-play-button\" style=\"width: 70px; height: 70px; background: rgba(255, 255, 255, 0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kpy-primary, #17458F); font-size: 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\">\n                                    <i class=\"bi bi-play-fill\" style=\"margin-left: 4px;\"><\/i>\n                                <\/div>\n                            <\/div>\n                                                            <div class=\"alpha-video-duration\" style=\"position: absolute; bottom: 12px; right: 12px; background: rgba(0, 0, 0, 0.85); color: var(--kpy-white, #ffffff); padding: 0.3rem 0.8rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; backdrop-filter: blur(4px);\">\n                                    5:30                                <\/div>\n                                                    <\/div>\n                        <div class=\"alpha-video-card-body\" style=\"padding: 1.5rem;\">\n                            <h4 class=\"alpha-video-title\" style=\"color: var(--kpy-base, #000000); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.3;\">Finding Your Passion<\/h4>\n                            <p class=\"alpha-video-excerpt\" style=\"color: var(--kpy-grey, #666666); font-size: 0.95rem; line-height: 1.6; margin-bottom: 0;\"><\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"alpha-video-data\" style=\"display:none;\"\n                         data-video-type=\"youtube\"\n                         data-video-url=\"https:\/\/www.youtube.com\/watch?v=imaRIOj2TcI&amp;list=PLWPirh4EWFpF6kRQ39VFv1EmGeHVkNqK1\"\n                         data-embed-code=\"\"\n                         data-embed-url=\"https:\/\/www.youtube.com\/embed\/imaRIOj2TcI\"><\/div>\n                <\/div>\n                    <\/div>\n    <\/div>\n    \n    <!-- Video Modal -->\n    <div class=\"alpha-video-modal-backdrop\" id=\"alphaVideoModalBackdrop\"><\/div>\n    <div class=\"alpha-video-modal\" id=\"alphaVideoModal\" aria-hidden=\"true\" role=\"dialog\" aria-modal=\"true\">\n        <div class=\"alpha-video-modal-dialog\">\n            <button type=\"button\" class=\"alpha-video-modal-close\" id=\"alphaVideoModalClose\" aria-label=\"Close video\">\n                <i class=\"bi bi-x-lg\"><\/i>\n            <\/button>\n            <div class=\"alpha-video-modal-body\" id=\"alphaVideoModalBody\">\n                <!-- Video player will be injected here -->\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <style>\n    .alpha-video-gallery-shortcode {\n        max-width: 1200px;\n        margin: 0 auto;\n    }\n    .alpha-video-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 8px 30px rgba(var(--kpy-primary-rgb, 23, 74, 143), 0.25);\n    }\n    .alpha-video-card:hover .alpha-video-play-overlay {\n        background: rgba(0, 0, 0, 0.5);\n    }\n    .alpha-video-card:hover .alpha-play-button {\n        transform: scale(1.1);\n        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);\n    }\n    .alpha-video-modal-backdrop {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.85);\n        z-index: 9999;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.3s ease;\n        backdrop-filter: blur(5px);\n    }\n    .alpha-video-modal-backdrop.is-open {\n        opacity: 1;\n        visibility: visible;\n    }\n    .alpha-video-modal {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 10000;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.3s ease;\n    }\n    .alpha-video-modal.is-open {\n        opacity: 1;\n        visibility: visible;\n    }\n    .alpha-video-modal-dialog {\n        position: relative;\n        width: 90%;\n        max-width: 900px;\n        background: var(--kpy-white, #ffffff);\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n        transform: scale(0.9);\n        transition: transform 0.3s ease;\n    }\n    .alpha-video-modal.is-open .alpha-video-modal-dialog {\n        transform: scale(1);\n    }\n    .alpha-video-modal-close {\n        position: absolute;\n        top: 16px;\n        right: 16px;\n        width: 48px;\n        height: 48px;\n        background: rgba(0, 0, 0, 0.8);\n        color: var(--kpy-white, #ffffff);\n        border: none;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        z-index: 10;\n        transition: all 0.3s ease;\n        font-size: 1.25rem;\n    }\n    .alpha-video-modal-close:hover {\n        background: var(--kpy-primary, #17458F);\n        transform: scale(1.1);\n    }\n    .alpha-video-modal-body {\n        position: relative;\n        width: 100%;\n        padding-bottom: 56.25%;\n        background: var(--kpy-base, #000000);\n    }\n    .alpha-video-modal-body iframe,\n    .alpha-video-modal-body video {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n    }\n    @media (max-width: 768px) {\n        .alpha-video-modal-dialog {\n            width: 95%;\n            max-width: none;\n            margin: 1rem;\n        }\n        .alpha-video-modal-close {\n            width: 40px;\n            height: 40px;\n            top: 12px;\n            right: 12px;\n            font-size: 1rem;\n        }\n    }\n    <\/style>\n    \n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":106,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"page_category":[],"class_list":["post-248","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/lwegatech.net\/256\/wp-json\/wp\/v2\/pages\/248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lwegatech.net\/256\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lwegatech.net\/256\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lwegatech.net\/256\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lwegatech.net\/256\/wp-json\/wp\/v2\/comments?post=248"}],"version-history":[{"count":1,"href":"https:\/\/lwegatech.net\/256\/wp-json\/wp\/v2\/pages\/248\/revisions"}],"predecessor-version":[{"id":249,"href":"https:\/\/lwegatech.net\/256\/wp-json\/wp\/v2\/pages\/248\/revisions\/249"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lwegatech.net\/256\/wp-json\/wp\/v2\/media\/106"}],"wp:attachment":[{"href":"https:\/\/lwegatech.net\/256\/wp-json\/wp\/v2\/media?parent=248"}],"wp:term":[{"taxonomy":"page_category","embeddable":true,"href":"https:\/\/lwegatech.net\/256\/wp-json\/wp\/v2\/page_category?post=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}