{"id":2232,"date":"2026-07-17T11:08:34","date_gmt":"2026-07-17T04:08:34","guid":{"rendered":"https:\/\/sma2banguntapan.sch.id\/n\/?page_id=2232"},"modified":"2026-07-17T11:08:34","modified_gmt":"2026-07-17T04:08:34","slug":"gallery-video","status":"publish","type":"page","link":"https:\/\/sma2banguntapan.sch.id\/n\/?page_id=2232","title":{"rendered":"Gallery Video"},"content":{"rendered":"    \r\n    <style>\r\n        .vtv-main-wrapper { margin: 30px 0; width: 100%; color: inherit; }\r\n        \r\n        \/* SEARCH BAR ICON DI KANAN WARNA ABU-ABU *\/\r\n        .vtv-search-box-wrapper { position: relative; max-width: 500px; margin: 0 auto 40px auto; display: flex; align-items: center; }\r\n        .vtv-search-input { width: 100%; padding: 14px 50px 14px 22px; font-size: 0.95rem; border: 1.5px solid rgba(0, 0, 0, 0.12); border-radius: 50px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: initial; outline: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; }\r\n        .vtv-search-input:focus { border-color: currentColor; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); background: #ffffff; }\r\n        .vtv-search-icon-right { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: #9ca3af; pointer-events: none; transition: all 0.3s ease; }\r\n        .vtv-search-input:focus + .vtv-search-icon-right { fill: #6b7280; }\r\n\r\n        \/* GRID VIDEO KARTU & IKON MULTIMEDIA PLAY BUTTON (ABU-ABU TUA \/ CHARCOAL GRADASI KE HITAM) *\/\r\n        .vtv-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 25px; }\r\n        .vtv-folder-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(125, 125, 125, 0.15); border-radius: 18px; padding: 30px 22px; text-align: center; cursor: pointer; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; display: flex; flex-direction: column; align-items: center; }\r\n        .vtv-folder-card:hover { transform: translateY(-8px); border-color: currentColor; background: rgba(125, 125, 125, 0.05); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); }\r\n        \r\n        .vtv-icon-container { width: 72px; height: 72px; background: #e5e7eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: all 0.35s ease; }\r\n        .vtv-folder-card:hover .vtv-icon-container { transform: scale(1.1); background: #1f2937; }\r\n        \r\n        \/* Ikon Diubah Menjadi Ikon Video Player *\/\r\n        .vtv-icon-svg { width: 36px; height: 36px; fill: #374151; transition: fill 0.3s ease; }\r\n        .vtv-folder-card:hover .vtv-icon-svg { fill: #ffffff; }\r\n\r\n        .vtv-folder-title { font-size: 1.1rem; font-weight: 700; margin: 10px 0 6px 0; line-height: 1.4; color: inherit; }\r\n        .vtv-folder-meta { font-size: 0.78rem; opacity: 0.6; margin-top: auto; display: flex; align-items: center; gap: 5px; }\r\n\r\n        \/* PAGINATION *\/\r\n        .vtv-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 45px; }\r\n        .vtv-page-btn { background: rgba(125, 125, 125, 0.08); border: 1px solid rgba(125, 125, 125, 0.2); color: inherit; padding: 8px 18px; border-radius: 30px; cursor: pointer; font-size: 0.88rem; font-weight: 600; transition: all 0.3s ease; }\r\n        .vtv-page-btn:hover:not(:disabled) { background: currentColor; border-color: currentColor; color: #fff; }\r\n        .vtv-page-btn.active { background: currentColor; border-color: currentColor; color: #fff; cursor: default; filter: brightness(0.9); }\r\n        .vtv-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }\r\n        \r\n        .vtv-hidden { display: none !important; }\r\n        .vtv-no-results { text-align: center; opacity: 0.6; padding: 50px 0; font-size: 1.05rem; grid-column: 1 \/ -1; }\r\n\r\n        \/* MODAL SCREEN LAYER (LIGHTBOX VIDEO) *\/\r\n        .vtv-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; padding: 20px; }\r\n        .vtv-modal.active { opacity: 1; pointer-events: auto; }\r\n        .vtv-modal-content { background: #000000; width: 100%; max-width: 950px; aspect-ratio: 16\/9; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.5); position: relative; transform: scale(0.95); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; }\r\n        .vtv-modal.active .vtv-modal-content { transform: scale(1); }\r\n        \r\n        .vtv-modal-header { padding: 14px 25px; background: #111827; display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; width: 100%; z-index: 10; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); }\r\n        .vtv-modal-header h3 { margin: 0; font-size: 1.05rem; color: #ffffff; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }\r\n        .vtv-modal-close { background: rgba(255, 255, 255, 0.2); color: #ffffff; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }\r\n        .vtv-modal-close:hover { background: #ef4444; transform: rotate(90deg); }\r\n        \r\n        .vtv-modal-body { flex-grow: 1; width: 100%; height: 100%; }\r\n        .vtv-modal-body iframe { width: 100%; height: 100%; border: 0; }\r\n    <\/style>\r\n\r\n    <div class=\"vtv-main-wrapper\" id=\"vtvMainPortal\">\r\n                    <!-- MODERN AUTO SEARCH BAR -->\r\n            <div class=\"vtv-search-box-wrapper\">\r\n                <input type=\"text\" id=\"vtvSearchInput\" class=\"vtv-search-input\" placeholder=\"Ketik nama kegiatan untuk mencari video...\">\r\n                <svg class=\"vtv-search-icon-right\" viewBox=\"0 0 24 24\"><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\/><\/svg>\r\n            <\/div>\r\n        \r\n        <div class=\"vtv-folder-grid\" id=\"vtvGridContainer\">\r\n                                    <div class=\"vtv-folder-card vtv-filterable-item\" data-title=\"profil sma 2 banguntapan - 2026\" onclick=\"openVtvModal('Profil SMA 2 BANGUNTAPAN - 2026', '3_rS20o65Qw')\">\r\n                            <div class=\"vtv-icon-container\">\r\n                                <!-- Ikon Play Video Player -->\r\n                                <svg class=\"vtv-icon-svg\" viewBox=\"0 0 24 24\"><path d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM10 14.5v-5l4.5 2.5-4.5 2.5z\"\/><\/svg>\r\n                            <\/div>\r\n                            <div class=\"vtv-folder-title\">Profil SMA 2 BANGUNTAPAN - 2026<\/div>\r\n                            <div class=\"vtv-folder-meta\">\r\n                                <svg style=\"width:13px; height:13px; fill:currentColor;\" viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"\/><\/svg>\r\n                                14 Feb 2026 11:06                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"vtv-folder-card vtv-filterable-item\" data-title=\"profile sma negeri 2 banguntapan (2019)\" onclick=\"openVtvModal('Profile SMA Negeri 2 Banguntapan (2019)', 'bimOOwv9cTs')\">\r\n                            <div class=\"vtv-icon-container\">\r\n                                <!-- Ikon Play Video Player -->\r\n                                <svg class=\"vtv-icon-svg\" viewBox=\"0 0 24 24\"><path d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM10 14.5v-5l4.5 2.5-4.5 2.5z\"\/><\/svg>\r\n                            <\/div>\r\n                            <div class=\"vtv-folder-title\">Profile SMA Negeri 2 Banguntapan (2019)<\/div>\r\n                            <div class=\"vtv-folder-meta\">\r\n                                <svg style=\"width:13px; height:13px; fill:currentColor;\" viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"\/><\/svg>\r\n                                17 Jul 2019 11:05                            <\/div>\r\n                        <\/div>\r\n                                <div id=\"vtvNoResultsMessage\" class=\"vtv-no-results vtv-hidden\">Video kegiatan tidak ditemukan.<\/div>\r\n        <\/div>\r\n\r\n                    <div class=\"vtv-pagination\" id=\"vtvPaginationNav\"><\/div>\r\n            <\/div>\r\n\r\n    <!-- LIGHTBOX VIDEO MODAL SCREEN LAYER -->\r\n    <div id=\"vtvModalLayer\" class=\"vtv-modal\" onclick=\"closeVtvModalViaOverlay(event)\">\r\n        <div class=\"vtv-modal-content\">\r\n            <div class=\"vtv-modal-header\">\r\n                <h3 id=\"vtvModalLabel\">Nama Kegiatan Video<\/h3>\r\n                <button class=\"vtv-modal-close\" onclick=\"closeVtvModal()\">&times;<\/button>\r\n            <\/div>\r\n            <div class=\"vtv-modal-body\">\r\n                <iframe id=\"vtvModalIframe\" src=\"\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen loading=\"lazy\"><\/iframe>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            const itemsPerPage = parseInt(\"6\", 10) || 6;\r\n            let currentPage = 1;\r\n            \r\n            const searchInput = document.getElementById('vtvSearchInput');\r\n            const paginationNav = document.getElementById('vtvPaginationNav');\r\n            const noResultsMsg = document.getElementById('vtvNoResultsMessage');\r\n            const allItems = Array.from(document.querySelectorAll('.vtv-filterable-item'));\r\n\r\n            if (allItems.length === 0) return;\r\n\r\n            function updateVideoPortal() {\r\n                const query = searchInput ? searchInput.value.toLowerCase().trim() : '';\r\n                const filteredItems = allItems.filter(item => {\r\n                    const title = item.getAttribute('data-title') || '';\r\n                    return title.includes(query);\r\n                });\r\n\r\n                if (filteredItems.length === 0) {\r\n                    noResultsMsg.classList.remove('vtv-hidden');\r\n                    if(paginationNav) paginationNav.innerHTML = '';\r\n                    allItems.forEach(item => item.classList.add('vtv-hidden'));\r\n                    return;\r\n                } else {\r\n                    noResultsMsg.classList.add('vtv-hidden');\r\n                }\r\n\r\n                const totalItems = filteredItems.length;\r\n                const totalPages = Math.ceil(totalItems \/ itemsPerPage);\r\n                \r\n                if (currentPage > totalPages) currentPage = totalPages;\r\n                if (currentPage < 1) currentPage = 1;\r\n\r\n                const startIndex = (currentPage - 1) * itemsPerPage;\r\n                const endIndex = startIndex + itemsPerPage;\r\n\r\n                allItems.forEach(item => item.classList.add('vtv-hidden'));\r\n                filteredItems.forEach((item, index) => {\r\n                    if (index >= startIndex && index < endIndex) {\r\n                        item.classList.remove('vtv-hidden');\r\n                    }\r\n                });\r\n\r\n                renderPaginationControls(totalPages);\r\n            }\r\n\r\n            function renderPaginationControls(totalPages) {\r\n                if (!paginationNav) return;\r\n                paginationNav.innerHTML = '';\r\n                if (totalPages <= 1) return;\r\n\r\n                const prevBtn = document.createElement('button');\r\n                prevBtn.className = 'vtv-page-btn';\r\n                prevBtn.innerText = '\u2039';\r\n                prevBtn.disabled = (currentPage === 1);\r\n                prevBtn.onclick = () => { currentPage--; updateVideoPortal(); scrollToGalleryTop(); };\r\n                paginationNav.appendChild(prevBtn);\r\n\r\n                for (let i = 1; i <= totalPages; i++) {\r\n                    const pageBtn = document.createElement('button');\r\n                    pageBtn.className = 'vtv-page-btn' + (i === currentPage ? ' active' : '');\r\n                    pageBtn.innerText = i;\r\n                    pageBtn.onclick = () => { currentPage = i; updateVideoPortal(); scrollToGalleryTop(); };\r\n                    paginationNav.appendChild(pageBtn);\r\n                }\r\n\r\n                const nextBtn = document.createElement('button');\r\n                nextBtn.className = 'vtv-page-btn';\r\n                nextBtn.innerText = '\u203a';\r\n                nextBtn.disabled = (currentPage === totalPages);\r\n                nextBtn.onclick = () => { currentPage++; updateVideoPortal(); scrollToGalleryTop(); };\r\n                paginationNav.appendChild(nextBtn);\r\n            }\r\n\r\n            function scrollToGalleryTop() {\r\n                const portal = document.getElementById('vtvMainPortal');\r\n                if(portal) portal.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n            }\r\n\r\n            if (searchInput) {\r\n                searchInput.addEventListener('input', function() {\r\n                    currentPage = 1;\r\n                    updateVideoPortal();\r\n                });\r\n            }\r\n            updateVideoPortal();\r\n        });\r\n\r\n        function openVtvModal(title, youtubeId) {\r\n            const modal = document.getElementById('vtvModalLayer');\r\n            const label = document.getElementById('vtvModalLabel');\r\n            const iframe = document.getElementById('vtvModalIframe');\r\n            \r\n            label.innerText = title;\r\n            \/\/ Menggunakan autoplay=1 agar video langsung berputar otomatis saat di-klik\r\n            iframe.src = \"https:\/\/www.youtube.com\/embed\/\" + youtubeId + \"?autoplay=1&rel=0\";\r\n            \r\n            modal.classList.add('active');\r\n            document.body.style.overflow = 'hidden'; \r\n        }\r\n\r\n        function closeVtvModal() {\r\n            const modal = document.getElementById('vtvModalLayer');\r\n            const iframe = document.getElementById('vtvModalIframe');\r\n            \r\n            modal.classList.remove('active');\r\n            document.body.style.overflow = 'auto'; \r\n            setTimeout(() => { iframe.src = \"\"; }, 350);\r\n        }\r\n\r\n        function closeVdgModalViaOverlay(e) {\r\n            if (e.target.id === 'vtvModalLayer') closeVtvModal();\r\n        }\r\n\r\n        document.addEventListener('keydown', function(e) {\r\n            if (e.key === 'Escape') {\r\n                const modal = document.getElementById('vtvModalLayer');\r\n                if (modal && modal.classList.contains('active')) closeVtvModal();\r\n            }\r\n        });\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"folder":[],"class_list":["post-2232","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/pages\/2232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2232"}],"version-history":[{"count":1,"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/pages\/2232\/revisions"}],"predecessor-version":[{"id":2233,"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/pages\/2232\/revisions\/2233"}],"wp:attachment":[{"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2232"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=%2Fwp%2Fv2%2Ffolder&post=2232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}