SMArt Video - UK School Search<\/title>\r\n <style>\r\n .vid-app-wrapper * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n background-color: #f5f7fa;\r\n color: #001733;\r\n line-height: 1.6;\r\n }\r\n\r\n .vid-main-container {\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n padding: 0;\r\n }\r\n\r\n .vid-toolbar {\r\n width: 96%;\r\n margin: 24px auto 20px auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n }\r\n\r\n .vid-search-box {\r\n flex: 1;\r\n height: 48px;\r\n background: #fff;\r\n border-radius: 24px;\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n gap: 12px;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.06);\r\n transition: box-shadow 0.3s;\r\n border: none !important;\r\n }\r\n .vid-search-box:focus-within { box-shadow: 0 6px 16px rgba(0,0,0,0.1); }\r\n\r\n .vid-search-icon { width: 18px; height: 18px; color: #999; flex-shrink: 0; }\r\n\r\n .vid-input-field {\r\n flex: 1;\r\n height: 100%;\r\n width: 100%;\r\n font-size: 15px;\r\n color: #001733;\r\n border: none !important;\r\n outline: none !important;\r\n background: transparent !important;\r\n box-shadow: none !important;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n }\r\n .vid-input-field::-webkit-search-decoration,\r\n .vid-input-field::-webkit-search-cancel-button,\r\n .vid-input-field::-webkit-search-results-button,\r\n .vid-input-field::-webkit-search-results-decoration { -webkit-appearance: none; }\r\n\r\n .vid-filter-btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 10px 16px;\r\n background: #fff;\r\n border-radius: 24px;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.06);\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: none !important;\r\n }\r\n .vid-filter-btn:hover { background-color: #fcfcfc; transform: translateY(-1px); }\r\n .vid-filter-text { font-size: 14px; color: #45484D; font-weight: 500; }\r\n\r\n .vid-card-list {\r\n width: 96%;\r\n margin: 0 auto;\r\n padding-bottom: 40px;\r\n }\r\n\r\n .vid-card {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n background: #F1F5F6;\r\n border-radius: 12px;\r\n margin-bottom: 18px;\r\n padding: 12px;\r\n overflow: hidden;\r\n text-decoration: none;\r\n transition: opacity 0.2s ease;\r\n }\r\n\r\n .vid-thumb-wrap {\r\n width: 40%;\r\n flex-shrink: 0;\r\n aspect-ratio: 16 \/ 8.5;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n background: #000;\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n .vid-thumb-wrap:active { opacity: 0.9; }\r\n .vid-thumb-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n display: block;\r\n }\r\n .vid-play-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(0,0,0,0.3);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .vid-play-icon { width: 44px; height: 44px; }\r\n\r\n .vid-content {\r\n flex: 1;\r\n min-width: 0;\r\n padding-left: 14px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n .vid-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: #001733;\r\n margin-bottom: 4px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n .vid-date {\r\n font-size: 12px;\r\n color: #808080;\r\n margin-bottom: 8px;\r\n }\r\n .vid-desc {\r\n font-size: 13px;\r\n line-height: 18px;\r\n color: #5C5C66;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .vid-sk-wrapper { width: 96%; margin: 0 auto; }\r\n .vid-sk-card {\r\n background: #F1F5F6;\r\n border-radius: 12px;\r\n margin-bottom: 18px;\r\n padding: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n }\r\n .vid-sk-thumb {\r\n width: 40%;\r\n flex-shrink: 0;\r\n aspect-ratio: 16 \/ 9;\r\n background: #e0e0e0;\r\n border-radius: 8px;\r\n }\r\n .vid-sk-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }\r\n .vid-sk-line { height: 14px; background: #e0e0e0; border-radius: 4px; }\r\n .vid-sk-line.short { width: 50%; height: 18px; }\r\n .vid-sk-line.long { width: 90%; }\r\n .vid-sk-thumb, .vid-sk-line {\r\n background: linear-gradient(90deg, #f0f2f5 25%, #f9fafb 37%, #f0f2f5 63%);\r\n background-size: 400% 100%; animation: vid-sk-loading 1.4s ease infinite;\r\n }\r\n @keyframes vid-sk-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }\r\n\r\n .vid-empty { text-align: center; padding: 80px 20px; color: #999; font-size: 16px; }\r\n .vid-error { background: #fff3cd; border: 1px solid #ffc107; color: #856404; padding: 12px; border-radius: 8px; margin: 16px auto; width: 96%; display: none; text-align: center; }\r\n .vid-error.active { display: block; }\r\n\r\n #vidLightbox {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 99999;\r\n background: rgba(0,0,0,0.9);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n #vidLightbox.is-open { display: flex; }\r\n #vidLightbox .vid-modal {\r\n position: relative;\r\n width: 90%;\r\n max-width: 900px;\r\n aspect-ratio: 16 \/ 9;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n background: #000;\r\n }\r\n #vidLightbox video { width: 100%; height: 100%; background: #000; display: block; }\r\n #vidLightbox .vid-close {\r\n position: absolute;\r\n top: -42px;\r\n right: 0;\r\n width: 36px;\r\n height: 36px;\r\n border: 0;\r\n background: rgba(255,255,255,0.15);\r\n border-radius: 50%;\r\n color: #fff;\r\n font-size: 22px;\r\n line-height: 1;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n @media (min-width: 1025px) {\r\n .vid-toolbar { max-width: 720px; }\r\n .vid-card-list,\r\n .vid-sk-wrapper,\r\n .vid-error { max-width: 720px; }\r\n\r\n .vid-card { padding: 10px; margin-bottom: 14px; }\r\n .vid-thumb-wrap { width: 40%; }\r\n .vid-content { padding-left: 18px; }\r\n .vid-title { font-size: 19px; margin-bottom: 6px; }\r\n .vid-date { font-size: 14px; margin-bottom: 10px; }\r\n .vid-desc { font-size: 15px; line-height: 23px; }\r\n .vid-play-icon { width: 52px; height: 52px; }\r\n\r\n .vid-sk-card { padding: 10px; margin-bottom: 14px; }\r\n .vid-sk-thumb { width: 34%; }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .vid-main-container { max-width: 100%; }\r\n .vid-toolbar { width: 94%; gap: 10px; margin: 16px auto; }\r\n .vid-search-box { height: 40px; padding: 0 16px; }\r\n .vid-card-list { width: 94%; }\r\n .vid-sk-wrapper { width: 94%; }\r\n .vid-title { font-size: 15px; }\r\n .vid-date { font-size: 11px; }\r\n .vid-desc { font-size: 12px; line-height: 17px; }\r\n .vid-play-icon { width: 38px; height: 38px; }\r\n #vidLightbox .vid-close { top: 0; right: 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"vid-app-wrapper\">\r\n\r\n <div class=\"vid-main-container\">\r\n <div class=\"vid-error\" id=\"errorMessage\"><\/div>\r\n\r\n <div class=\"vid-toolbar\">\r\n <div class=\"vid-search-box\">\r\n <svg class=\"vid-search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\r\n <path d=\"m21 21-4.35-4.35\"><\/path>\r\n <\/svg>\r\n <input type=\"text\" class=\"vid-input-field\" id=\"searchInput\" placeholder=\"Search keywords\" autocomplete=\"off\">\r\n <\/div>\r\n\r\n <div class=\"vid-filter-btn\" id=\"filterButton\">\r\n <span class=\"vid-filter-text\" id=\"filterText\">Latest<\/span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#45484D\">\r\n <path d=\"M3 6h18M7 12h10M11 18h2\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"vid-sk-wrapper\" id=\"skeletonWrapper\"><\/div>\r\n <div class=\"vid-card-list\" id=\"videoList\" style=\"display: none;\"><\/div>\r\n <div class=\"vid-empty\" id=\"emptyContainer\" style=\"display: none;\">\r\n <div class=\"empty-text\">No videos<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const WORDPRESS_API_BASE = 'https:\/\/ukschoolsearch.ai\/wp-json\/wp\/v2';\r\n \/\/ \u82f1\u6587\u7248 video CPT slug\r\n const POST_TYPE = 'videoen';\r\n\r\n let videos = [];\r\n let sortAsc = false;\r\n let searchText = '';\r\n\r\n function stripHtml(html) {\r\n if (!html) return '';\r\n return html\r\n .replace(\/<[^>]*>\/g, '')\r\n .replace(\/ \/g, ' ')\r\n .replace(\/"\/g, '\"')\r\n .replace(\/&\/g, '&')\r\n .replace(\/<\/g, '<')\r\n .replace(\/>\/g, '>')\r\n .trim();\r\n }\r\n\r\n function extractExcerpt(htmlContent) {\r\n const text = stripHtml(htmlContent);\r\n return text.length > 150 ? text.substring(0, 150) + '...' : text;\r\n }\r\n\r\n function extractVideoUrl(field) {\r\n if (typeof field === 'string') return field;\r\n if (field && field.url) return field.url;\r\n if (field && field.src) return field.src;\r\n if (field && field.mime_type && field.mime_type.includes('video') && field.source_url) return field.source_url;\r\n return '';\r\n }\r\n\r\n function extractImageUrl(field) {\r\n if (typeof field === 'string') return field;\r\n if (field && field.url) return field.url;\r\n if (field && field.sizes && field.sizes.large) return field.sizes.large;\r\n if (field && field.sizes && field.sizes.medium_large) return field.sizes.medium_large;\r\n if (field && field.sizes && field.sizes.full) return field.sizes.full;\r\n if (field && field.source_url) return field.source_url;\r\n return 'https:\/\/via.placeholder.com\/640x360\/333333\/FFFFFF?text=No+Cover';\r\n }\r\n\r\n function formatDate(dateString) {\r\n if (!dateString) return '';\r\n const date = new Date(dateString);\r\n if (isNaN(date.getTime())) {\r\n return String(dateString).trim();\r\n }\r\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\r\n return months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();\r\n }\r\n\r\n function initSkeleton() {\r\n const wrapper = document.getElementById('skeletonWrapper');\r\n let html = '';\r\n for (let i = 0; i < 6; i++) {\r\n html +=\r\n '<div class=\"vid-sk-card\">' +\r\n '<div class=\"vid-sk-thumb\"><\/div>' +\r\n '<div class=\"vid-sk-info\">' +\r\n '<div class=\"vid-sk-line short\"><\/div>' +\r\n '<div class=\"vid-sk-line long\"><\/div>' +\r\n '<div class=\"vid-sk-line\"><\/div>' +\r\n '<\/div>' +\r\n '<\/div>';\r\n }\r\n wrapper.innerHTML = html;\r\n }\r\n\r\n function toggleLoading(show) {\r\n const skeleton = document.getElementById('skeletonWrapper');\r\n const list = document.getElementById('videoList');\r\n const empty = document.getElementById('emptyContainer');\r\n if (show) {\r\n skeleton.style.display = 'block';\r\n list.style.display = 'none';\r\n empty.style.display = 'none';\r\n } else {\r\n skeleton.style.display = 'none';\r\n }\r\n }\r\n\r\n function showError(message) {\r\n const errorEl = document.getElementById('errorMessage');\r\n errorEl.textContent = message;\r\n errorEl.classList.add('active');\r\n setTimeout(() => errorEl.classList.remove('active'), 5000);\r\n }\r\n\r\n async function fetchVideos() {\r\n try {\r\n if (videos.length === 0) toggleLoading(true);\r\n console.log('\u5f00\u59cb\u4ece WordPress \u83b7\u53d6\u89c6\u9891 (en)...');\r\n\r\n \/\/ acf_format=standard \u8ba9 coverimage(Image)\u3001videosource(URL) \u8fd4\u56de\u5b8c\u6574\u5bf9\u8c61\/URL\r\n let response = await fetch(WORDPRESS_API_BASE + '\/' + POST_TYPE + '?per_page=100&acf_format=standard');\r\n if (response.status === 404) {\r\n response = await fetch(WORDPRESS_API_BASE + '\/posts?post_type=' + POST_TYPE + '&per_page=100&acf_format=standard');\r\n }\r\n if (response.status === 404) {\r\n const catRes = await fetch(WORDPRESS_API_BASE + '\/categories?search=video');\r\n if (catRes.ok) {\r\n const cats = await catRes.json();\r\n if (Array.isArray(cats) && cats.length > 0) {\r\n const catId = cats[0].id;\r\n response = await fetch(WORDPRESS_API_BASE + '\/posts?categories=' + catId + '&per_page=100&acf_format=standard');\r\n }\r\n }\r\n }\r\n\r\n if (!response.ok) throw new Error('HTTP ' + response.status);\r\n\r\n const posts = await response.json();\r\n if (!Array.isArray(posts)) throw new Error('\u8fd4\u56de\u7684\u6570\u636e\u4e0d\u662f\u6570\u7ec4');\r\n\r\n console.log('\u6210\u529f\u83b7\u53d6', posts.length, '\u6761\u89c6\u9891');\r\n if (posts[0]) console.log('\u7b2c\u4e00\u6761 date \u5b57\u6bb5:', posts[0].acf && posts[0].acf.date, '| post.date:', posts[0].date);\r\n\r\n videos = posts.map((post, index) => {\r\n const acf = post && post.acf ? post.acf : {};\r\n return {\r\n key: 'video_' + (post.id || index),\r\n id: (typeof acf.id === 'number' ? acf.id : null) || post.id || index + 1,\r\n videoSource: extractVideoUrl(acf.videosource),\r\n coverImage: extractImageUrl(acf.coverimage),\r\n title: stripHtml(acf.title || (post.title && post.title.rendered) || ('Video ' + (index + 1))),\r\n content: stripHtml(acf.content || extractExcerpt((post.content && post.content.rendered) || '')),\r\n date: acf.date || post.date || new Date().toISOString()\r\n };\r\n });\r\n\r\n return true;\r\n } catch (error) {\r\n console.error('\u83b7\u53d6\u89c6\u9891\u5931\u8d25:', error);\r\n showError('Load failed: ' + error.message);\r\n videos = [];\r\n return false;\r\n } finally {\r\n toggleLoading(false);\r\n }\r\n }\r\n\r\n function renderVideos() {\r\n const keyword = searchText.trim().toLowerCase();\r\n let list = videos.slice();\r\n\r\n if (keyword) {\r\n list = list.filter(v => {\r\n const searchContent = [v.title || '', v.content || '', v.date || ''].join(' ').toLowerCase();\r\n return searchContent.includes(keyword);\r\n });\r\n }\r\n\r\n list.sort((a, b) => sortAsc ? a.id - b.id : b.id - a.id);\r\n\r\n const container = document.getElementById('videoList');\r\n const emptyContainer = document.getElementById('emptyContainer');\r\n\r\n if (list.length === 0) {\r\n container.style.display = 'none';\r\n emptyContainer.style.display = 'block';\r\n emptyContainer.querySelector('.empty-text').textContent = keyword ? 'No matching videos' : 'No videos';\r\n } else {\r\n emptyContainer.style.display = 'none';\r\n container.style.display = 'block';\r\n\r\n container.innerHTML = list.map(item =>\r\n '<div class=\"vid-card\">' +\r\n '<div class=\"vid-thumb-wrap\" data-video=\"' + encodeURIComponent(item.videoSource || '') + '\">' +\r\n '<img decoding=\"async\" src=\"' + item.coverImage + '\" class=\"vid-thumb-img\" alt=\"' + (item.title || '') + '\" loading=\"lazy\" onerror=\"this.src=\\'https:\/\/via.placeholder.com\/640x360\/333333\/FFFFFF?text=No+Cover\\'\">' +\r\n '<div class=\"vid-play-overlay\">' +\r\n '<svg class=\"vid-play-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\r\n '<circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"rgba(255,255,255,0.25)\"\/>' +\r\n '<path d=\"M9.5 7.5 L16.5 12 L9.5 16.5 Z\" fill=\"#fff\"\/>' +\r\n '<\/svg>' +\r\n '<\/div>' +\r\n '<\/div>' +\r\n '<div class=\"vid-content\">' +\r\n '<div class=\"vid-title\">' + (item.title || '') + '<\/div>' +\r\n '<div class=\"vid-date\">' + formatDate(item.date) + '<\/div>' +\r\n '<div class=\"vid-desc\">' + (item.content || '') + '<\/div>' +\r\n '<\/div>' +\r\n '<\/div>'\r\n ).join('');\r\n\r\n container.querySelectorAll('.vid-thumb-wrap').forEach(thumb => {\r\n thumb.addEventListener('click', function () {\r\n const url = decodeURIComponent(thumb.getAttribute('data-video') || '');\r\n if (url) openLightbox(url);\r\n });\r\n });\r\n }\r\n }\r\n\r\n let lb, lbVideo, lbModal, lbClose;\r\n function setupLightbox() {\r\n lb = document.createElement('div');\r\n lb.id = 'vidLightbox';\r\n lb.innerHTML =\r\n '<div class=\"vid-modal\">' +\r\n '<button type=\"button\" class=\"vid-close\" aria-label=\"Close\">×<\/button>' +\r\n '<video controls playsinline preload=\"metadata\"><\/video>' +\r\n '<\/div>';\r\n document.body.appendChild(lb);\r\n lbVideo = lb.querySelector('video');\r\n lbModal = lb.querySelector('.vid-modal');\r\n lbClose = lb.querySelector('.vid-close');\r\n\r\n lbClose.addEventListener('click', closeLightbox);\r\n lb.addEventListener('click', function (e) {\r\n if (!lbModal.contains(e.target)) closeLightbox();\r\n });\r\n document.addEventListener('keydown', function (e) {\r\n if (e.key === 'Escape' && lb.classList.contains('is-open')) closeLightbox();\r\n });\r\n }\r\n\r\n function openLightbox(url) {\r\n lbVideo.src = url;\r\n lb.classList.add('is-open');\r\n const p = lbVideo.play();\r\n if (p && p.catch) p.catch(function () {});\r\n }\r\n function closeLightbox() {\r\n lb.classList.remove('is-open');\r\n lbVideo.pause();\r\n lbVideo.removeAttribute('src');\r\n lbVideo.load();\r\n }\r\n\r\n document.getElementById('filterButton').addEventListener('click', () => {\r\n sortAsc = !sortAsc;\r\n document.getElementById('filterText').textContent = sortAsc ? 'Oldest' : 'Latest';\r\n renderVideos();\r\n });\r\n\r\n document.getElementById('searchInput').addEventListener('input', (e) => {\r\n searchText = e.target.value;\r\n renderVideos();\r\n });\r\n\r\n window.addEventListener('DOMContentLoaded', async () => {\r\n setupLightbox();\r\n initSkeleton();\r\n await fetchVideos();\r\n renderVideos();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SMArt Video – UK School Search Latest No videos<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-33309","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\n<title>Videoen - SmartGen in UK<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Videoen - SmartGen in UK\" \/>\n<meta property=\"og:description\" content=\"SMArt Video – UK School Search Latest No videos\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/\" \/>\n<meta property=\"og:site_name\" content=\"SmartGen in UK\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-06T06:42:05+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/\",\"url\":\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/\",\"name\":\"Videoen - SmartGen in UK\",\"isPartOf\":{\"@id\":\"https:\/\/ukschoolsearch.ai\/#website\"},\"datePublished\":\"2026-06-30T03:49:51+00:00\",\"dateModified\":\"2026-07-06T06:42:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ukschoolsearch.ai\/index.php\/new-home-page-english\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Videoen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ukschoolsearch.ai\/#website\",\"url\":\"https:\/\/ukschoolsearch.ai\/\",\"name\":\"SmartGen in UK\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/ukschoolsearch.ai\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ukschoolsearch.ai\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ukschoolsearch.ai\/#organization\",\"name\":\"SmartGen in UK\",\"url\":\"https:\/\/ukschoolsearch.ai\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ukschoolsearch.ai\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ukschoolsearch.ai\/wp-content\/uploads\/2024\/06\/SmartGen_logo.png\",\"contentUrl\":\"https:\/\/ukschoolsearch.ai\/wp-content\/uploads\/2024\/06\/SmartGen_logo.png\",\"width\":213,\"height\":213,\"caption\":\"SmartGen in UK\"},\"image\":{\"@id\":\"https:\/\/ukschoolsearch.ai\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Videoen - SmartGen in UK","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/","og_locale":"en_US","og_type":"article","og_title":"Videoen - SmartGen in UK","og_description":"SMArt Video – UK School Search Latest No videos","og_url":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/","og_site_name":"SmartGen in UK","article_modified_time":"2026-07-06T06:42:05+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/","url":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/","name":"Videoen - SmartGen in UK","isPartOf":{"@id":"https:\/\/ukschoolsearch.ai\/#website"},"datePublished":"2026-06-30T03:49:51+00:00","dateModified":"2026-07-06T06:42:05+00:00","breadcrumb":{"@id":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ukschoolsearch.ai\/index.php\/videoen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ukschoolsearch.ai\/index.php\/new-home-page-english\/"},{"@type":"ListItem","position":2,"name":"Videoen"}]},{"@type":"WebSite","@id":"https:\/\/ukschoolsearch.ai\/#website","url":"https:\/\/ukschoolsearch.ai\/","name":"SmartGen in UK","description":"","publisher":{"@id":"https:\/\/ukschoolsearch.ai\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ukschoolsearch.ai\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ukschoolsearch.ai\/#organization","name":"SmartGen in UK","url":"https:\/\/ukschoolsearch.ai\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ukschoolsearch.ai\/#\/schema\/logo\/image\/","url":"https:\/\/ukschoolsearch.ai\/wp-content\/uploads\/2024\/06\/SmartGen_logo.png","contentUrl":"https:\/\/ukschoolsearch.ai\/wp-content\/uploads\/2024\/06\/SmartGen_logo.png","width":213,"height":213,"caption":"SmartGen in UK"},"image":{"@id":"https:\/\/ukschoolsearch.ai\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/pages\/33309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/comments?post=33309"}],"version-history":[{"count":10,"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/pages\/33309\/revisions"}],"predecessor-version":[{"id":33322,"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/pages\/33309\/revisions\/33322"}],"wp:attachment":[{"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/media?parent=33309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n SMArt Video - UK School Search<\/title>\r\n <style>\r\n .vid-app-wrapper * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n background-color: #f5f7fa;\r\n color: #001733;\r\n line-height: 1.6;\r\n }\r\n\r\n .vid-main-container {\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n padding: 0;\r\n }\r\n\r\n .vid-toolbar {\r\n width: 96%;\r\n margin: 24px auto 20px auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n }\r\n\r\n .vid-search-box {\r\n flex: 1;\r\n height: 48px;\r\n background: #fff;\r\n border-radius: 24px;\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n gap: 12px;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.06);\r\n transition: box-shadow 0.3s;\r\n border: none !important;\r\n }\r\n .vid-search-box:focus-within { box-shadow: 0 6px 16px rgba(0,0,0,0.1); }\r\n\r\n .vid-search-icon { width: 18px; height: 18px; color: #999; flex-shrink: 0; }\r\n\r\n .vid-input-field {\r\n flex: 1;\r\n height: 100%;\r\n width: 100%;\r\n font-size: 15px;\r\n color: #001733;\r\n border: none !important;\r\n outline: none !important;\r\n background: transparent !important;\r\n box-shadow: none !important;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n }\r\n .vid-input-field::-webkit-search-decoration,\r\n .vid-input-field::-webkit-search-cancel-button,\r\n .vid-input-field::-webkit-search-results-button,\r\n .vid-input-field::-webkit-search-results-decoration { -webkit-appearance: none; }\r\n\r\n .vid-filter-btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 10px 16px;\r\n background: #fff;\r\n border-radius: 24px;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.06);\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: none !important;\r\n }\r\n .vid-filter-btn:hover { background-color: #fcfcfc; transform: translateY(-1px); }\r\n .vid-filter-text { font-size: 14px; color: #45484D; font-weight: 500; }\r\n\r\n .vid-card-list {\r\n width: 96%;\r\n margin: 0 auto;\r\n padding-bottom: 40px;\r\n }\r\n\r\n .vid-card {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n background: #F1F5F6;\r\n border-radius: 12px;\r\n margin-bottom: 18px;\r\n padding: 12px;\r\n overflow: hidden;\r\n text-decoration: none;\r\n transition: opacity 0.2s ease;\r\n }\r\n\r\n .vid-thumb-wrap {\r\n width: 40%;\r\n flex-shrink: 0;\r\n aspect-ratio: 16 \/ 8.5;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n background: #000;\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n .vid-thumb-wrap:active { opacity: 0.9; }\r\n .vid-thumb-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n display: block;\r\n }\r\n .vid-play-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(0,0,0,0.3);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .vid-play-icon { width: 44px; height: 44px; }\r\n\r\n .vid-content {\r\n flex: 1;\r\n min-width: 0;\r\n padding-left: 14px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n .vid-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: #001733;\r\n margin-bottom: 4px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n .vid-date {\r\n font-size: 12px;\r\n color: #808080;\r\n margin-bottom: 8px;\r\n }\r\n .vid-desc {\r\n font-size: 13px;\r\n line-height: 18px;\r\n color: #5C5C66;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .vid-sk-wrapper { width: 96%; margin: 0 auto; }\r\n .vid-sk-card {\r\n background: #F1F5F6;\r\n border-radius: 12px;\r\n margin-bottom: 18px;\r\n padding: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n }\r\n .vid-sk-thumb {\r\n width: 40%;\r\n flex-shrink: 0;\r\n aspect-ratio: 16 \/ 9;\r\n background: #e0e0e0;\r\n border-radius: 8px;\r\n }\r\n .vid-sk-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }\r\n .vid-sk-line { height: 14px; background: #e0e0e0; border-radius: 4px; }\r\n .vid-sk-line.short { width: 50%; height: 18px; }\r\n .vid-sk-line.long { width: 90%; }\r\n .vid-sk-thumb, .vid-sk-line {\r\n background: linear-gradient(90deg, #f0f2f5 25%, #f9fafb 37%, #f0f2f5 63%);\r\n background-size: 400% 100%; animation: vid-sk-loading 1.4s ease infinite;\r\n }\r\n @keyframes vid-sk-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }\r\n\r\n .vid-empty { text-align: center; padding: 80px 20px; color: #999; font-size: 16px; }\r\n .vid-error { background: #fff3cd; border: 1px solid #ffc107; color: #856404; padding: 12px; border-radius: 8px; margin: 16px auto; width: 96%; display: none; text-align: center; }\r\n .vid-error.active { display: block; }\r\n\r\n #vidLightbox {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 99999;\r\n background: rgba(0,0,0,0.9);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n #vidLightbox.is-open { display: flex; }\r\n #vidLightbox .vid-modal {\r\n position: relative;\r\n width: 90%;\r\n max-width: 900px;\r\n aspect-ratio: 16 \/ 9;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n background: #000;\r\n }\r\n #vidLightbox video { width: 100%; height: 100%; background: #000; display: block; }\r\n #vidLightbox .vid-close {\r\n position: absolute;\r\n top: -42px;\r\n right: 0;\r\n width: 36px;\r\n height: 36px;\r\n border: 0;\r\n background: rgba(255,255,255,0.15);\r\n border-radius: 50%;\r\n color: #fff;\r\n font-size: 22px;\r\n line-height: 1;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n @media (min-width: 1025px) {\r\n .vid-toolbar { max-width: 720px; }\r\n .vid-card-list,\r\n .vid-sk-wrapper,\r\n .vid-error { max-width: 720px; }\r\n\r\n .vid-card { padding: 10px; margin-bottom: 14px; }\r\n .vid-thumb-wrap { width: 40%; }\r\n .vid-content { padding-left: 18px; }\r\n .vid-title { font-size: 19px; margin-bottom: 6px; }\r\n .vid-date { font-size: 14px; margin-bottom: 10px; }\r\n .vid-desc { font-size: 15px; line-height: 23px; }\r\n .vid-play-icon { width: 52px; height: 52px; }\r\n\r\n .vid-sk-card { padding: 10px; margin-bottom: 14px; }\r\n .vid-sk-thumb { width: 34%; }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .vid-main-container { max-width: 100%; }\r\n .vid-toolbar { width: 94%; gap: 10px; margin: 16px auto; }\r\n .vid-search-box { height: 40px; padding: 0 16px; }\r\n .vid-card-list { width: 94%; }\r\n .vid-sk-wrapper { width: 94%; }\r\n .vid-title { font-size: 15px; }\r\n .vid-date { font-size: 11px; }\r\n .vid-desc { font-size: 12px; line-height: 17px; }\r\n .vid-play-icon { width: 38px; height: 38px; }\r\n #vidLightbox .vid-close { top: 0; right: 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"vid-app-wrapper\">\r\n\r\n <div class=\"vid-main-container\">\r\n <div class=\"vid-error\" id=\"errorMessage\"><\/div>\r\n\r\n <div class=\"vid-toolbar\">\r\n <div class=\"vid-search-box\">\r\n <svg class=\"vid-search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\r\n <path d=\"m21 21-4.35-4.35\"><\/path>\r\n <\/svg>\r\n <input type=\"text\" class=\"vid-input-field\" id=\"searchInput\" placeholder=\"Search keywords\" autocomplete=\"off\">\r\n <\/div>\r\n\r\n <div class=\"vid-filter-btn\" id=\"filterButton\">\r\n <span class=\"vid-filter-text\" id=\"filterText\">Latest<\/span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#45484D\">\r\n <path d=\"M3 6h18M7 12h10M11 18h2\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"vid-sk-wrapper\" id=\"skeletonWrapper\"><\/div>\r\n <div class=\"vid-card-list\" id=\"videoList\" style=\"display: none;\"><\/div>\r\n <div class=\"vid-empty\" id=\"emptyContainer\" style=\"display: none;\">\r\n <div class=\"empty-text\">No videos<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const WORDPRESS_API_BASE = 'https:\/\/ukschoolsearch.ai\/wp-json\/wp\/v2';\r\n \/\/ \u82f1\u6587\u7248 video CPT slug\r\n const POST_TYPE = 'videoen';\r\n\r\n let videos = [];\r\n let sortAsc = false;\r\n let searchText = '';\r\n\r\n function stripHtml(html) {\r\n if (!html) return '';\r\n return html\r\n .replace(\/<[^>]*>\/g, '')\r\n .replace(\/ \/g, ' ')\r\n .replace(\/"\/g, '\"')\r\n .replace(\/&\/g, '&')\r\n .replace(\/<\/g, '<')\r\n .replace(\/>\/g, '>')\r\n .trim();\r\n }\r\n\r\n function extractExcerpt(htmlContent) {\r\n const text = stripHtml(htmlContent);\r\n return text.length > 150 ? text.substring(0, 150) + '...' : text;\r\n }\r\n\r\n function extractVideoUrl(field) {\r\n if (typeof field === 'string') return field;\r\n if (field && field.url) return field.url;\r\n if (field && field.src) return field.src;\r\n if (field && field.mime_type && field.mime_type.includes('video') && field.source_url) return field.source_url;\r\n return '';\r\n }\r\n\r\n function extractImageUrl(field) {\r\n if (typeof field === 'string') return field;\r\n if (field && field.url) return field.url;\r\n if (field && field.sizes && field.sizes.large) return field.sizes.large;\r\n if (field && field.sizes && field.sizes.medium_large) return field.sizes.medium_large;\r\n if (field && field.sizes && field.sizes.full) return field.sizes.full;\r\n if (field && field.source_url) return field.source_url;\r\n return 'https:\/\/via.placeholder.com\/640x360\/333333\/FFFFFF?text=No+Cover';\r\n }\r\n\r\n function formatDate(dateString) {\r\n if (!dateString) return '';\r\n const date = new Date(dateString);\r\n if (isNaN(date.getTime())) {\r\n return String(dateString).trim();\r\n }\r\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\r\n return months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();\r\n }\r\n\r\n function initSkeleton() {\r\n const wrapper = document.getElementById('skeletonWrapper');\r\n let html = '';\r\n for (let i = 0; i < 6; i++) {\r\n html +=\r\n '<div class=\"vid-sk-card\">' +\r\n '<div class=\"vid-sk-thumb\"><\/div>' +\r\n '<div class=\"vid-sk-info\">' +\r\n '<div class=\"vid-sk-line short\"><\/div>' +\r\n '<div class=\"vid-sk-line long\"><\/div>' +\r\n '<div class=\"vid-sk-line\"><\/div>' +\r\n '<\/div>' +\r\n '<\/div>';\r\n }\r\n wrapper.innerHTML = html;\r\n }\r\n\r\n function toggleLoading(show) {\r\n const skeleton = document.getElementById('skeletonWrapper');\r\n const list = document.getElementById('videoList');\r\n const empty = document.getElementById('emptyContainer');\r\n if (show) {\r\n skeleton.style.display = 'block';\r\n list.style.display = 'none';\r\n empty.style.display = 'none';\r\n } else {\r\n skeleton.style.display = 'none';\r\n }\r\n }\r\n\r\n function showError(message) {\r\n const errorEl = document.getElementById('errorMessage');\r\n errorEl.textContent = message;\r\n errorEl.classList.add('active');\r\n setTimeout(() => errorEl.classList.remove('active'), 5000);\r\n }\r\n\r\n async function fetchVideos() {\r\n try {\r\n if (videos.length === 0) toggleLoading(true);\r\n console.log('\u5f00\u59cb\u4ece WordPress \u83b7\u53d6\u89c6\u9891 (en)...');\r\n\r\n \/\/ acf_format=standard \u8ba9 coverimage(Image)\u3001videosource(URL) \u8fd4\u56de\u5b8c\u6574\u5bf9\u8c61\/URL\r\n let response = await fetch(WORDPRESS_API_BASE + '\/' + POST_TYPE + '?per_page=100&acf_format=standard');\r\n if (response.status === 404) {\r\n response = await fetch(WORDPRESS_API_BASE + '\/posts?post_type=' + POST_TYPE + '&per_page=100&acf_format=standard');\r\n }\r\n if (response.status === 404) {\r\n const catRes = await fetch(WORDPRESS_API_BASE + '\/categories?search=video');\r\n if (catRes.ok) {\r\n const cats = await catRes.json();\r\n if (Array.isArray(cats) && cats.length > 0) {\r\n const catId = cats[0].id;\r\n response = await fetch(WORDPRESS_API_BASE + '\/posts?categories=' + catId + '&per_page=100&acf_format=standard');\r\n }\r\n }\r\n }\r\n\r\n if (!response.ok) throw new Error('HTTP ' + response.status);\r\n\r\n const posts = await response.json();\r\n if (!Array.isArray(posts)) throw new Error('\u8fd4\u56de\u7684\u6570\u636e\u4e0d\u662f\u6570\u7ec4');\r\n\r\n console.log('\u6210\u529f\u83b7\u53d6', posts.length, '\u6761\u89c6\u9891');\r\n if (posts[0]) console.log('\u7b2c\u4e00\u6761 date \u5b57\u6bb5:', posts[0].acf && posts[0].acf.date, '| post.date:', posts[0].date);\r\n\r\n videos = posts.map((post, index) => {\r\n const acf = post && post.acf ? post.acf : {};\r\n return {\r\n key: 'video_' + (post.id || index),\r\n id: (typeof acf.id === 'number' ? acf.id : null) || post.id || index + 1,\r\n videoSource: extractVideoUrl(acf.videosource),\r\n coverImage: extractImageUrl(acf.coverimage),\r\n title: stripHtml(acf.title || (post.title && post.title.rendered) || ('Video ' + (index + 1))),\r\n content: stripHtml(acf.content || extractExcerpt((post.content && post.content.rendered) || '')),\r\n date: acf.date || post.date || new Date().toISOString()\r\n };\r\n });\r\n\r\n return true;\r\n } catch (error) {\r\n console.error('\u83b7\u53d6\u89c6\u9891\u5931\u8d25:', error);\r\n showError('Load failed: ' + error.message);\r\n videos = [];\r\n return false;\r\n } finally {\r\n toggleLoading(false);\r\n }\r\n }\r\n\r\n function renderVideos() {\r\n const keyword = searchText.trim().toLowerCase();\r\n let list = videos.slice();\r\n\r\n if (keyword) {\r\n list = list.filter(v => {\r\n const searchContent = [v.title || '', v.content || '', v.date || ''].join(' ').toLowerCase();\r\n return searchContent.includes(keyword);\r\n });\r\n }\r\n\r\n list.sort((a, b) => sortAsc ? a.id - b.id : b.id - a.id);\r\n\r\n const container = document.getElementById('videoList');\r\n const emptyContainer = document.getElementById('emptyContainer');\r\n\r\n if (list.length === 0) {\r\n container.style.display = 'none';\r\n emptyContainer.style.display = 'block';\r\n emptyContainer.querySelector('.empty-text').textContent = keyword ? 'No matching videos' : 'No videos';\r\n } else {\r\n emptyContainer.style.display = 'none';\r\n container.style.display = 'block';\r\n\r\n container.innerHTML = list.map(item =>\r\n '<div class=\"vid-card\">' +\r\n '<div class=\"vid-thumb-wrap\" data-video=\"' + encodeURIComponent(item.videoSource || '') + '\">' +\r\n '<img decoding=\"async\" src=\"' + item.coverImage + '\" class=\"vid-thumb-img\" alt=\"' + (item.title || '') + '\" loading=\"lazy\" onerror=\"this.src=\\'https:\/\/via.placeholder.com\/640x360\/333333\/FFFFFF?text=No+Cover\\'\">' +\r\n '<div class=\"vid-play-overlay\">' +\r\n '<svg class=\"vid-play-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\r\n '<circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"rgba(255,255,255,0.25)\"\/>' +\r\n '<path d=\"M9.5 7.5 L16.5 12 L9.5 16.5 Z\" fill=\"#fff\"\/>' +\r\n '<\/svg>' +\r\n '<\/div>' +\r\n '<\/div>' +\r\n '<div class=\"vid-content\">' +\r\n '<div class=\"vid-title\">' + (item.title || '') + '<\/div>' +\r\n '<div class=\"vid-date\">' + formatDate(item.date) + '<\/div>' +\r\n '<div class=\"vid-desc\">' + (item.content || '') + '<\/div>' +\r\n '<\/div>' +\r\n '<\/div>'\r\n ).join('');\r\n\r\n container.querySelectorAll('.vid-thumb-wrap').forEach(thumb => {\r\n thumb.addEventListener('click', function () {\r\n const url = decodeURIComponent(thumb.getAttribute('data-video') || '');\r\n if (url) openLightbox(url);\r\n });\r\n });\r\n }\r\n }\r\n\r\n let lb, lbVideo, lbModal, lbClose;\r\n function setupLightbox() {\r\n lb = document.createElement('div');\r\n lb.id = 'vidLightbox';\r\n lb.innerHTML =\r\n '<div class=\"vid-modal\">' +\r\n '<button type=\"button\" class=\"vid-close\" aria-label=\"Close\">×<\/button>' +\r\n '<video controls playsinline preload=\"metadata\"><\/video>' +\r\n '<\/div>';\r\n document.body.appendChild(lb);\r\n lbVideo = lb.querySelector('video');\r\n lbModal = lb.querySelector('.vid-modal');\r\n lbClose = lb.querySelector('.vid-close');\r\n\r\n lbClose.addEventListener('click', closeLightbox);\r\n lb.addEventListener('click', function (e) {\r\n if (!lbModal.contains(e.target)) closeLightbox();\r\n });\r\n document.addEventListener('keydown', function (e) {\r\n if (e.key === 'Escape' && lb.classList.contains('is-open')) closeLightbox();\r\n });\r\n }\r\n\r\n function openLightbox(url) {\r\n lbVideo.src = url;\r\n lb.classList.add('is-open');\r\n const p = lbVideo.play();\r\n if (p && p.catch) p.catch(function () {});\r\n }\r\n function closeLightbox() {\r\n lb.classList.remove('is-open');\r\n lbVideo.pause();\r\n lbVideo.removeAttribute('src');\r\n lbVideo.load();\r\n }\r\n\r\n document.getElementById('filterButton').addEventListener('click', () => {\r\n sortAsc = !sortAsc;\r\n document.getElementById('filterText').textContent = sortAsc ? 'Oldest' : 'Latest';\r\n renderVideos();\r\n });\r\n\r\n document.getElementById('searchInput').addEventListener('input', (e) => {\r\n searchText = e.target.value;\r\n renderVideos();\r\n });\r\n\r\n window.addEventListener('DOMContentLoaded', async () => {\r\n setupLightbox();\r\n initSkeleton();\r\n await fetchVideos();\r\n renderVideos();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SMArt Video – UK School Search Latest No videos<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-33309","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\n<title>Videoen - SmartGen in UK<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Videoen - SmartGen in UK\" \/>\n<meta property=\"og:description\" content=\"SMArt Video – UK School Search Latest No videos\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/\" \/>\n<meta property=\"og:site_name\" content=\"SmartGen in UK\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-06T06:42:05+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/\",\"url\":\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/\",\"name\":\"Videoen - SmartGen in UK\",\"isPartOf\":{\"@id\":\"https:\/\/ukschoolsearch.ai\/#website\"},\"datePublished\":\"2026-06-30T03:49:51+00:00\",\"dateModified\":\"2026-07-06T06:42:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ukschoolsearch.ai\/index.php\/new-home-page-english\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Videoen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ukschoolsearch.ai\/#website\",\"url\":\"https:\/\/ukschoolsearch.ai\/\",\"name\":\"SmartGen in UK\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/ukschoolsearch.ai\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ukschoolsearch.ai\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ukschoolsearch.ai\/#organization\",\"name\":\"SmartGen in UK\",\"url\":\"https:\/\/ukschoolsearch.ai\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ukschoolsearch.ai\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ukschoolsearch.ai\/wp-content\/uploads\/2024\/06\/SmartGen_logo.png\",\"contentUrl\":\"https:\/\/ukschoolsearch.ai\/wp-content\/uploads\/2024\/06\/SmartGen_logo.png\",\"width\":213,\"height\":213,\"caption\":\"SmartGen in UK\"},\"image\":{\"@id\":\"https:\/\/ukschoolsearch.ai\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Videoen - SmartGen in UK","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/","og_locale":"en_US","og_type":"article","og_title":"Videoen - SmartGen in UK","og_description":"SMArt Video – UK School Search Latest No videos","og_url":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/","og_site_name":"SmartGen in UK","article_modified_time":"2026-07-06T06:42:05+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/","url":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/","name":"Videoen - SmartGen in UK","isPartOf":{"@id":"https:\/\/ukschoolsearch.ai\/#website"},"datePublished":"2026-06-30T03:49:51+00:00","dateModified":"2026-07-06T06:42:05+00:00","breadcrumb":{"@id":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ukschoolsearch.ai\/index.php\/videoen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ukschoolsearch.ai\/index.php\/videoen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ukschoolsearch.ai\/index.php\/new-home-page-english\/"},{"@type":"ListItem","position":2,"name":"Videoen"}]},{"@type":"WebSite","@id":"https:\/\/ukschoolsearch.ai\/#website","url":"https:\/\/ukschoolsearch.ai\/","name":"SmartGen in UK","description":"","publisher":{"@id":"https:\/\/ukschoolsearch.ai\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ukschoolsearch.ai\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ukschoolsearch.ai\/#organization","name":"SmartGen in UK","url":"https:\/\/ukschoolsearch.ai\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ukschoolsearch.ai\/#\/schema\/logo\/image\/","url":"https:\/\/ukschoolsearch.ai\/wp-content\/uploads\/2024\/06\/SmartGen_logo.png","contentUrl":"https:\/\/ukschoolsearch.ai\/wp-content\/uploads\/2024\/06\/SmartGen_logo.png","width":213,"height":213,"caption":"SmartGen in UK"},"image":{"@id":"https:\/\/ukschoolsearch.ai\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/pages\/33309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/comments?post=33309"}],"version-history":[{"count":10,"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/pages\/33309\/revisions"}],"predecessor-version":[{"id":33322,"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/pages\/33309\/revisions\/33322"}],"wp:attachment":[{"href":"https:\/\/ukschoolsearch.ai\/index.php\/wp-json\/wp\/v2\/media?parent=33309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}