{"id":7104,"date":"2026-09-04T05:27:55","date_gmt":"2026-09-04T05:27:55","guid":{"rendered":"https:\/\/primetoolhub.com\/?page_id=7104"},"modified":"2026-09-04T05:27:55","modified_gmt":"2026-09-04T05:27:55","slug":"youtube-galary","status":"publish","type":"page","link":"https:\/\/schoolict.net\/tools\/youtube-galary\/","title":{"rendered":"Youtube galary"},"content":{"rendered":"<style>\r\n\/* =========================================================\r\n   \ud83d\udcfa PTH AUTO YOUTUBE GALLERY PLAYER (V6.0 - Official Google API - FIXED GRID)\r\n   ========================================================= *\/\r\n.pth-yt-container { max-width: 1100px; margin: 40px auto; font-family: 'Inter', system-ui, sans-serif; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }\r\n.pth-yt-header { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #f1f5f9; }\r\n.pth-yt-header h2 { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0; display: flex; align-items: center; gap: 10px; }\r\n.pth-yt-header-badge { background: #ef4444; color: #ffffff; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; animation: pthPulse 2s infinite; }\r\n@keyframes pthPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }\r\n\r\n.pth-yt-top-section { display: flex; gap: 20px; margin-bottom: 25px; align-items: stretch; }\r\n.pth-yt-player-col { flex: 2; background: #000000; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1); aspect-ratio: 16 \/ 9; }\r\n.pth-yt-player-col iframe { width: 100%; height: 100%; border: 0; }\r\n.pth-yt-desc-col { flex: 1; display: flex; flex-direction: column; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }\r\n.pth-yt-desc-title { font-size: 15px; font-weight: 800; color: #0f172a; margin: 0; padding: 15px 20px; background: #ffffff; border-bottom: 1px solid #e2e8f0; line-height: 1.5; }\r\n.pth-yt-desc-scroll { flex-grow: 1; overflow-y: auto; padding: 15px 20px; height: 0; }\r\n.pth-yt-desc-scroll::-webkit-scrollbar { width: 5px; }\r\n.pth-yt-desc-scroll::-webkit-scrollbar-track { background: transparent; }\r\n.pth-yt-desc-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\r\n.pth-yt-desc-content { font-size: 13px; color: #475569; line-height: 1.6; word-break: break-word; }\r\n.pth-yt-desc-content a { color: #2563eb; text-decoration: none; font-weight: 700; background: #eff6ff; padding: 2px 6px; border-radius: 4px; transition: all 0.2s; display: inline-block; margin: 2px 0; }\r\n.pth-yt-desc-content a:hover { background: #2563eb; color: #ffffff; }\r\n\r\n@media (max-width: 900px) { .pth-yt-top-section { flex-direction: column; } .pth-yt-desc-col { height: 300px; } .pth-yt-desc-scroll { height: auto; } }\r\n\r\n\/* \ud83d\udd34 FIXED THE GRID HERE: Changed auto-fit to auto-fill and added justify-content: center *\/\r\n.pth-yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; justify-content: center; }\r\n\r\n.pth-yt-item { cursor: pointer; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; transition: all 0.2s ease; display: flex; flex-direction: column; height: 100%; }\r\n.pth-yt-item:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.06); border-color: #3b82f6; }\r\n.pth-yt-item.active { border-color: #ef4444; background: #fef2f2; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }\r\n.pth-yt-thumb-wrap { position: relative; width: 100%; padding-bottom: 56.25%; background: #e2e8f0; overflow: hidden; }\r\n.pth-yt-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }\r\n.pth-yt-item:hover .pth-yt-thumb { transform: scale(1.05); }\r\n.pth-yt-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: rgba(0,0,0,0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }\r\n.pth-yt-play-icon::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #ffffff; margin-left: 3px; }\r\n.pth-yt-item:hover .pth-yt-play-icon { opacity: 1; }\r\n.pth-yt-title { font-size: 13px; font-weight: 600; color: #1e293b; padding: 15px; margin: 0; line-height: 1.5; white-space: normal; flex-grow: 1; }\r\n\r\n.pth-yt-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #f1f5f9; }\r\n.pth-yt-page-btn { background: transparent; border: none; padding: 8px 16px; border-radius: 30px; font-size: 14px; font-weight: 600; color: #64748b; cursor: pointer; transition: all 0.2s ease; outline: none; }\r\n.pth-yt-page-btn:hover:not([disabled]) { background: #f1f5f9; color: #0f172a; }\r\n.pth-yt-page-btn.active { background: #3b82f6; color: #ffffff; box-shadow: 0 4px 10px rgba(59,130,246,0.3); }\r\n.pth-yt-page-btn[disabled] { opacity: 0.5; cursor: not-allowed; }\r\n\r\n.pth-yt-loading { text-align: center; padding: 40px; color: #64748b; font-weight: 600; }\r\n.pth-yt-error { color: #ef4444; background: #fef2f2; border: 1px solid #fca5a5; padding: 20px; border-radius: 8px; text-align: center; font-weight: 600; }\r\n\r\n.pth-yt-more-card:hover { border-color: #ef4444 !important; transform: translateY(-4px); box-shadow: 0 10px 25px rgba(239, 68, 68, 0.2) !important; }\r\n.pth-yt-more-card .pth-yt-more-overlay { opacity: 0; }\r\n.pth-yt-more-card:hover .pth-yt-more-overlay { opacity: 1; }\r\n<\/style>\r\n\r\n<div class=\"pth-yt-container\">\r\n    <div class=\"pth-yt-header\">\r\n        <h2>\ud83c\udfac Latest Tutorials & Guides<\/h2>\r\n        <span class=\"pth-yt-header-badge\">NEW<\/span>\r\n    <\/div>\r\n\r\n    <div id=\"pth-yt-loader\" class=\"pth-yt-loading\">\u23f3 Loading latest videos securely...<\/div>\r\n\r\n    <div id=\"pth-yt-content\" style=\"display: none;\">\r\n        <div class=\"pth-yt-top-section\">\r\n            <div class=\"pth-yt-player-col\">\r\n                <iframe id=\"pth-yt-iframe\" src=\"\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\r\n            <\/div>\r\n            <div class=\"pth-yt-desc-col\">\r\n                <h3 id=\"pth-yt-desc-title\" class=\"pth-yt-desc-title\">Loading...<\/h3>\r\n                <div class=\"pth-yt-desc-scroll\">\r\n                    <div id=\"pth-yt-desc-content\" class=\"pth-yt-desc-content\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div id=\"pth-yt-playlist\" class=\"pth-yt-grid\"><\/div>\r\n        <div id=\"pth-yt-pagination\" class=\"pth-yt-pagination\"><\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    \r\n    \/\/ \u2699\ufe0f\u2699\ufe0f\u2699\ufe0f OFFICIAL GOOGLE API SETTINGS \u2699\ufe0f\u2699\ufe0f\u2699\ufe0f\r\n    const CONFIG = {\r\n        API_KEY: \"AIzaSyCL-FElvbF-_NkUug5vHH93DEMMI-N3yBw\", \r\n        CHANNEL_ID: \"UCM--3x182bxbMreA2GiTaXA\", \r\n        VIDEOS_PER_PAGE: 6                     \r\n    };\r\n    \/\/ \u2699\ufe0f\u2699\ufe0f\u2699\ufe0f==============================\u2699\ufe0f\u2699\ufe0f\u2699\ufe0f\r\n\r\n    let allVideos = [];\r\n    let currentPage = 1;\r\n    let currentlyPlayingId = null;\r\n\r\n    function showError(msg) {\r\n        document.getElementById('pth-yt-loader').innerHTML = `<div class=\"pth-yt-error\">${msg}<\/div>`;\r\n    }\r\n\r\n    function formatDescription(text) {\r\n        if (!text || text.trim() === \"\") return \"<i>No description available for this video.<\/i>\";\r\n        \r\n        let safeText = text.replace(\/&\/g, '&').replace(\/<\/g, '<').replace(\/>\/g, '>');\r\n        const urlRegex1 = \/(\\b(https?|ftp):\\\/\\\/[-A-Z0-9+&@#\\\/%?=~_|!:,.;]*[-A-Z0-9+&@#\\\/%=~_|])\/gim;\r\n        const urlRegex2 = \/(^|[^\\\/])(www\\.[\\S]+(\\b|$))\/gim;\r\n            \r\n        let linkedText = safeText\r\n            .replace(urlRegex1, '<a href=\"$1\" target=\"_blank\" rel=\"noopener noreferrer\">$1<\/a>')\r\n            .replace(urlRegex2, '$1<a href=\"http:\/\/$2\" target=\"_blank\" rel=\"noopener noreferrer\">$2<\/a>');\r\n\r\n        return linkedText.replace(\/\\n\/g, '<br>');\r\n    }\r\n\r\n    async function fetchVideosFromGoogleAPI() {\r\n        if(!CONFIG.API_KEY || CONFIG.API_KEY.includes(\"AIzaSyB...\")) {\r\n            showError(\"\u274c Please insert your Google API Key in the code to load videos.\");\r\n            return;\r\n        }\r\n\r\n        try {\r\n            const uploadsPlaylistId = CONFIG.CHANNEL_ID.replace(\/^UC\/, \"UU\");\r\n            const apiUrl = `https:\/\/www.googleapis.com\/youtube\/v3\/playlistItems?part=snippet&maxResults=50&playlistId=${uploadsPlaylistId}&key=${CONFIG.API_KEY}`;\r\n            \r\n            const response = await fetch(apiUrl);\r\n            const data = await response.json();\r\n\r\n            if (data.error) {\r\n                console.error(\"YouTube API Error:\", data.error.message);\r\n                showError(`\u274c API Error: ${data.error.message}`);\r\n                return;\r\n            }\r\n\r\n            if (data.items && data.items.length > 0) {\r\n                allVideos = data.items.map(item => {\r\n                    return {\r\n                        id: item.snippet.resourceId.videoId,\r\n                        title: item.snippet.title,\r\n                        description: item.snippet.description\r\n                    };\r\n                });\r\n                \r\n                initPlayer();\r\n            } else {\r\n                showError(\"\u274c No videos found in this channel.\");\r\n            }\r\n        } catch (error) {\r\n            console.error(\"Network Error:\", error);\r\n            showError(\"\u274c Failed to connect to YouTube. Please check your network.\");\r\n        }\r\n    }\r\n\r\n    function initPlayer() {\r\n        document.getElementById('pth-yt-loader').style.display = 'none';\r\n        document.getElementById('pth-yt-content').style.display = 'block';\r\n\r\n        const firstVideo = allVideos[0];\r\n        currentlyPlayingId = firstVideo.id;\r\n        \r\n        document.getElementById('pth-yt-iframe').src = `https:\/\/www.youtube.com\/embed\/${currentlyPlayingId}?autoplay=0&rel=0`;\r\n        \r\n        document.getElementById('pth-yt-desc-title').innerText = firstVideo.title;\r\n        document.getElementById('pth-yt-desc-content').innerHTML = formatDescription(firstVideo.description);\r\n\r\n        renderPage(currentPage);\r\n    }\r\n\r\n    function renderPage(page) {\r\n        const playlistContainer = document.getElementById('pth-yt-playlist');\r\n        playlistContainer.innerHTML = ''; \r\n\r\n        const totalItems = allVideos.length + 1; \r\n        const startIndex = (page - 1) * CONFIG.VIDEOS_PER_PAGE;\r\n        const endIndex = startIndex + CONFIG.VIDEOS_PER_PAGE;\r\n\r\n        for (let i = startIndex; i < endIndex; i++) {\r\n            if (i < allVideos.length) {\r\n                const vid = allVideos[i];\r\n                const isActive = vid.id === currentlyPlayingId ? 'active' : '';\r\n\r\n                const itemHtml = `\r\n                    <div class=\"pth-yt-item ${isActive}\" data-vid=\"${vid.id}\" onclick=\"playPthVideo(this, '${vid.id}')\">\r\n                        <div class=\"pth-yt-thumb-wrap\">\r\n                            <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/${vid.id}\/mqdefault.jpg\" class=\"pth-yt-thumb\" alt=\"${vid.title.replace(\/\"\/g, '\"')}\">\r\n                            <div class=\"pth-yt-play-icon\"><\/div>\r\n                        <\/div>\r\n                        <p class=\"pth-yt-title\">${vid.title}<\/p>\r\n                    <\/div>\r\n                `;\r\n                playlistContainer.insertAdjacentHTML('beforeend', itemHtml);\r\n            } else if (i === allVideos.length) {\r\n                const moreHtml = `\r\n                    <a href=\"https:\/\/www.youtube.com\/channel\/${CONFIG.CHANNEL_ID}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"pth-yt-item pth-yt-more-card\" style=\"text-decoration:none; border: 2px dashed #ef4444; background: #fffaf9;\">\r\n                        <div class=\"pth-yt-thumb-wrap\">\r\n                            <img decoding=\"async\" src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/04\/Watch-more-Data.jpeg\" class=\"pth-yt-thumb\" alt=\"Watch More Prime Tool Hub Videos\">\r\n                            <div class=\"pth-yt-more-overlay\" style=\"position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background: rgba(239, 68, 68, 0.15); transition: all 0.3s;\">\r\n                            <\/div>\r\n                        <\/div>\r\n                        <p class=\"pth-yt-title\" style=\"color:#dc2626; font-weight:800; text-align:center; font-size:14px; display:flex; align-items:center; justify-content:center;\">Explore Full Channel \ud83d\ude80<\/p>\r\n                    <\/a>\r\n                `;\r\n                playlistContainer.insertAdjacentHTML('beforeend', moreHtml);\r\n            }\r\n        }\r\n        renderPagination();\r\n    }\r\n\r\n    function renderPagination() {\r\n        const totalItems = allVideos.length + 1; \r\n        const totalPages = Math.ceil(totalItems \/ CONFIG.VIDEOS_PER_PAGE);\r\n        const paginationContainer = document.getElementById('pth-yt-pagination');\r\n        \r\n        if (totalPages <= 1) { paginationContainer.innerHTML = ''; return; }\r\n\r\n        let html = `<button class=\"pth-yt-page-btn\" onclick=\"changePthPage(${currentPage - 1})\" ${currentPage === 1 ? 'disabled' : ''}>\u00ab Prev<\/button>`;\r\n        for (let i = 1; i <= totalPages; i++) {\r\n            html += `<button class=\"pth-yt-page-btn ${i === currentPage ? 'active' : ''}\" onclick=\"changePthPage(${i})\">${i}<\/button>`;\r\n        }\r\n        html += `<button class=\"pth-yt-page-btn\" onclick=\"changePthPage(${currentPage + 1})\" ${currentPage === totalPages ? 'disabled' : ''}>Next \u00bb<\/button>`;\r\n        \r\n        paginationContainer.innerHTML = html;\r\n    }\r\n\r\n    window.changePthPage = function(newPage) {\r\n        const totalItems = allVideos.length + 1;\r\n        const totalPages = Math.ceil(totalItems \/ CONFIG.VIDEOS_PER_PAGE);\r\n        if (newPage >= 1 && newPage <= totalPages) {\r\n            currentPage = newPage;\r\n            renderPage(currentPage);\r\n        }\r\n    };\r\n\r\n    window.playPthVideo = function(element, vidId) {\r\n        currentlyPlayingId = vidId;\r\n        const mainIframe = document.getElementById('pth-yt-iframe');\r\n        mainIframe.src = `https:\/\/www.youtube.com\/embed\/${vidId}?autoplay=1&rel=0`;\r\n\r\n        const vidData = allVideos.find(v => v.id === vidId);\r\n        if(vidData) {\r\n            document.getElementById('pth-yt-desc-title').innerText = vidData.title;\r\n            document.getElementById('pth-yt-desc-content').innerHTML = formatDescription(vidData.description);\r\n            document.querySelector('.pth-yt-desc-scroll').scrollTop = 0;\r\n        }\r\n\r\n        document.querySelectorAll('.pth-yt-item').forEach(el => el.classList.remove('active'));\r\n        element.classList.add('active');\r\n        \r\n        if(window.innerWidth < 768) {\r\n            mainIframe.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n        }\r\n    };\r\n\r\n    fetchVideosFromGoogleAPI();\r\n});\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7104","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/7104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/comments?post=7104"}],"version-history":[{"count":1,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/7104\/revisions"}],"predecessor-version":[{"id":7105,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/7104\/revisions\/7105"}],"wp:attachment":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media?parent=7104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}