Content Studio — Videos
CONTENT STUDIO SUB-PAGE · VIDEOS & VLOGS

Videos & Vlogs

Content Studio/video-content/ · Content Storage/vlogs/

Video content gallery featuring YouTube vlogs, engineering content, and educational shorts. Includes a thumbnail grid viewer, inline YouTube player, API-synced duration fetching, and a unified video sync manager.

YouTube vlogs, engineering content ও educational shorts-এর gallery। Thumbnail grid, inline player, YouTube API duration sync এবং unified video sync manager সহ।

YouTube API Thumbnail Grid Inline Player Duration Sync Vlog Gallery Video Sync
Video Gallery
Engineering Vlog — A3KM Studio
0:52
2:28
SECTION 01

Thumbnail Grid & Inline Player

The video gallery shows YouTube thumbnail cards in a responsive grid. Clicking a thumbnail opens an inline iframe player without leaving the page. Each card shows title, duration (fetched via YouTube Data API), view count, and tags.

Video gallery YouTube thumbnail card grid দেখায়। Click করলে inline iframe player খোলে। প্রতিটি card-এ title, duration, view count এবং tags আছে।

YouTube Thumbnail Cards
Responsive grid of video thumbnails fetched from YouTube API with hover play overlay
Inline Iframe Player
Video plays in a modal iframe overlay without navigating to YouTube
Duration Display
Video duration shown on each card — fetched and cached via YouTube Data API v3
Thumbnail Grid
Engineering Vlog #1
2:28 · 142 views
MATLAB Tutorial
5:14 · 87 views
SECTION 02

YouTube API Sync & Duration Fetch

The fetch-youtube-durations.js script authenticates with YouTube Data API v3 and fetches video metadata (duration, view count, publish date) for all listed videos. Data is cached locally to minimize API calls.

YouTube Data API v3 দিয়ে video duration, view count, publish date fetch করা হয়। Data locally cache করে API call কমানো হয়।

Local JSON Cache
Fetched metadata stored in JSON — avoids redundant API calls on repeat visits
Unified Sync Manager
unified-video-sync.js handles YouTube API refresh + local data merge
Auto-Sync to Mobile
Mobile content.json is automatically synced on every upload, edit, or delete — no manual action needed
Sync Flow
YouTube Data API v3
↓ GET /videos?part=contentDetails
fetch-youtube-durations.js
↓ Parse ISO 8601 duration
Local JSON cache update
↓ Render to thumbnail card
Gallery UI ← duration, views
SECTION 03

Vlog Storage & Organization

Vlog files (thumbnails, captions, metadata) are stored in Content Storage/vlogs/. Each vlog has a folder with a thumbnail image, a metadata JSON, and optionally a local caption file. The gallery page reads these to populate the grid.

Vlogs-এর thumbnails, captions ও metadata Content Storage/vlogs/-এ আছে। প্রতিটি vlog-এর folder-এ thumbnail, metadata JSON এবং caption file আছে।

Per-vlog Folders
Each vlog stored in its own folder with thumbnail, JSON metadata, and caption file
Caption Support
Optional local caption files (.vtt / .srt) for offline subtitle display
Category Tags
Vlogs tagged by type: Engineering, Travel, Daily, Tutorial — filterable in gallery
Storage Structure
Content Storage/vlogs/
├─ vlog-001/
├─ thumbnail.jpg
├─ meta.json
└─ captions.vtt
└─ vlog-002/ …
Files & Structure

Videos — File Reference

FileTypeDescription
Content-studio/content-manager.js → syncVideoToMobileContentJSON()Auto-SyncAutomatically updates mobile content.json after every upload, edit or delete
Content Studio/video-content/unified-video-sync.jsScriptMain sync logic — merges YouTube API data with local JSON cache
Content Studio/video-content/fetch-youtube-durations.jsScriptYouTube Data API v3 caller — fetches video duration and metadata
Content Storage/vlogs/StoragePer-vlog folders with thumbnail, metadata JSON, optional captions
Content Storage/educational-videos/StorageEducational and tutorial video assets (separate from vlogs)
 Mobile Guide
Mobile — Videos Guide
Previous
← Books & PDFs