Page Flow
3-Page Navigation
Page 01
Content Hub
hub.html
Page 02
Video Gallery
video-gallery.html
Page 03
Video Viewer
video-viewer.html?id=X
Page 1 — Hub
Content Hub
hub.html — সব 5টা content type-এর entry point। Video Blogs card থেকে video-gallery.html-এ যাওয়া যায়।
Page 2
Video Gallery
video-gallery.html — YouTube thumbnail cards, category tabs, search।
Studio
All 8
Tour & Vlogs
Daily Life
Tutorial
18:45
Tour & Vlogs
SITAKUNDO TOUR || সীতাকুণ্ড ভ্রমণ
8:15
Daily Life
ESE Department — KUET 2K23
1
Category Tabs (Horizontal Scroll)
Scrollable tab row — All · Tour & Vlogs · Daily Life · Tutorial · Campus etc. Active tab gets red fill. Category tabs are different from project filter chips — these are "category-tabs" class.
Subcategory filter tab — scroll করা যায়। Active tab red fill হয়।
2
Search Bar (Always Visible)
Unlike Projects pages, video gallery search bar is always visible — not hidden behind a toggle button. Searches title, description, tags.
Search bar সবসময় দেখা যায় — toggle দরকার নেই।
3
YouTube Thumbnail Cards
Thumbnails fetched from YouTube CDN:
img.youtube.com/vi/{videoId}/maxresdefault.jpg. Duration badge (bottom-right), Subcategory badge (top-left), Language badge (বাংলা / Mixed).YouTube CDN থেকে thumbnail load হয়। Duration, subcategory, language badge।
4
Language Badge
Each card shows language: বাংলা (
bn) or Mixed (bn-en) or English. Small colored badge below cards.Video কোন ভাষায় সেটা badge-এ দেখায়।
Video Subcategories
Tour & Vlogs
Daily Life
Campus
Tutorial
Highlights
Page 3
YouTube Video Viewer
video-viewer.html — YouTube IFrame API, like, share, related videos, description।
Videos
18:45
07:30 / 18:45
Like
Share
YouTube
Description
সীতাকুণ্ড ভ্রমণ। চন্দ্রনাথ পাহাড়। গুলিয়াখালি সমুদ্র সৈকত...
1
YouTube IFrame API Player
Official
YT.Player (YouTube IFrame API). On load triggers autoplay. Fallback: if API not ready within 5s, falls back to raw <iframe> embed with ?autoplay=1.YouTube IFrame API দিয়ে player — 5 second timeout-এর পর iframe fallback।
2
Like Button
Heart icon — toggles red liked state. Stored locally. View count and like count fetched live from
youtube-data-fetcher.js via YouTube Data API v3 if API key set.Like button locally toggle করা যায়। API key থাকলে real YouTube like count দেখায়।
3
Share (Web Share API)
Opens native share sheet with video title and YouTube URL. Web Share API — same as Projects section.
4
Bookmark (localStorage)
Yellow bookmark icon → saved state persists across sessions. Same localStorage pattern as Projects.
5
Description Section
Video description rendered below player. From
content.json description field. Expandable (show more/less).6
Related Videos
Shows other videos from same subcategory. Thumbnail + title. Tap → load that video.
Same subcategory-র related videos দেখায় — tap করলে সেই video load হয়।
All Features
Video System — Every Feature
YouTube IFrame API
YT.Player — full YouTube player in-app. Autoplay, controls. 5s fallback to raw <iframe>.YouTube IFrame API — real player, autoplay, fallback সহ।
YouTube Data API Fetcher
youtube-data-fetcher.js fetches live view count, like count via YouTube Data API v3. Only active if API key configured.YouTube Data API v3 দিয়ে real view/like count fetch করে।
Category Tabs (Horizontal)
Subcategory tabs with smooth scrollable row. Fade-edge indicators show there's more content. Active tab red filled.
Subcategory scroll tabs — fade edge indicator দেখায় আরো আছে।
YouTube Thumbnail CDN
Thumbnails from
img.youtube.com/vi/{videoId}/maxresdefault.jpg — no local image storage needed. Loads from YouTube's CDN.Thumbnail locally store করতে হয় না — YouTube CDN থেকে আসে।
Like Toggle
Local like state saved in memory. Red heart when liked. Can be extended with YouTube Data API write (requires OAuth).
Bookmark (localStorage)
Same pattern as Projects — saved to
localStorage, yellow icon when saved, persists across sessions.Web Share API
Native share sheet with video title + YouTube URL. Falls back to clipboard copy if Web Share API not supported.
Related Videos Section
Videos from same subcategory shown as related list. Tap any → viewer loads that video without page reload.
Related videos tap করলে page reload ছাড়াই new video load হয়।
Data Schema
content.json — video-blogs fields
| Field | Type | Description |
|---|---|---|
id | String | e.g. vid-tour-001 |
title | String | Video title (Bangla or English) |
subcategory | String | Tour & Vlogs / Daily Life / Campus etc. — category tab filter key |
youtubeUrl | String | Full YouTube URL (youtu.be short or youtube.com) |
videoId | String | YouTube video ID — used for thumbnail CDN + IFrame API |
thumbnail | String | YouTube CDN thumbnail URL (maxresdefault.jpg) |
duration | String | e.g. "18:45" — shown as duration badge on card |
publishDate | String | ISO date — shown on card meta |
language | String | bn | bn-en | en — language badge |
tags[] | Array | Searchable tags |
icon | String | FontAwesome icon class for fallback display |
File Map
| File | Location | Role |
|---|---|---|
hub.html | mobile/content-studio/ | Content Studio hub — entry for all 5 content types |
video-gallery.html | mobile/content-studio/video-blogs/ | Gallery listing — category tabs, search, video cards |
video-gallery.js | mobile/content-studio/video-blogs/ | Loads content.json, renders cards, filter+search |
video-viewer.html | mobile/content-studio/video-blogs/ | YouTube IFrame player, like, share, related |
video-viewer.js | mobile/content-studio/video-blogs/ | IFrame API integration, data fetcher, related videos |
youtube-data-fetcher.js | mobile/content-studio/video-blogs/ | YouTube Data API v3 — live view/like count |
youtube-api-config.js | mobile/content-studio/video-blogs/ | API key configuration for YouTube Data API |
content.json | Content Code/ | Central data source — video-blogs array (8 videos) |