Educational Video Platform with Interactive Geolocation Map

Summary

This project delivered an educational multimedia platform centered around educational video content hosted on YouTube. Built on WordPress, the website provides a learning resource where students and educators can explore educational videos through structured curriculum categories or via an interactive geographical world map.

The solution automated the publishing workflow so non-technical content contributors can publish new lessons in moments: entering a YouTube link automatically pulls video metadata, generates responsive post layouts, assigns multi-tier taxonomies, and pins the video to its exact geographical location on the global map.

The Challenge

The educational organisation produced video lessons, historical retrospectives, and field expeditions recorded across diverse geographical locations worldwide. Their existing publishing process presented several hurdles:

• Publishing Inconsistencies: Contributors had varying technical backgrounds. Manually downloading thumbnails, configuring iframe embed codes, and formatting lesson notes resulted in inconsistent post styling and broken mobile views.
• Lost Geographic Context: Many educational lessons were tied to physical locations—such as geological formations, historical landmarks, archaeological discoveries, and ecological biomes. Browsing through conventional chronological lists lost this geographical connection.
• Complex Multi-Category Classification: Lessons required classification across multiple criteria simultaneously: academic subject (e.g., History, Geology, Environmental Science), curriculum key stage or age group, and geographical continent or country.
• Mobile Performance & Heavy Embed Overhead: Loading standard YouTube <iframe> embeds across archive pages and map popups severely degraded performance, transferring megabytes of third-party scripts and draining mobile battery life in classroom settings.

The Solution & Workflow

We engineered a customized WordPress implementation combining automated YouTube ingestion, a custom taxonomy architecture, a performant GeoJSON REST endpoint, and an interactive Leaflet map interface:

┌────────────────────────────────────────────────────────┐
│              Educator Admin Dashboard                  │
│   • Input YouTube URL/ID   • Geolocation Coordinates   │
│   • Curriculum Subject     • Age / Key Stage Level     │
└───────────────────────────┬────────────────────────────┘
                            │
                            ▼ (YouTube API / oEmbed Sync)
┌────────────────────────────────────────────────────────┐
│              Automated Post Creation Engine            │
│   • Thumbnail Ingestion    • Responsive Video Façade   │
│   • Multi-Category Tagging • Geo-Coordinates Storage   │
└───────────────────────────┬────────────────────────────┘
                            │
                            ▼
┌────────────────────────────────────────────────────────┐
│               GeoJSON Endpoint Generator               │
│   • Lightweight Points Cache  • Filter Query Handler   │
└───────────────────────────┬────────────────────────────┘
                            │
                            ▼
┌────────────────────────────────────────────────────────┐
│            Interactive Frontend Explorer               │
│   • Clustered Map View     • Faceted Subject Filters   │
│   • Lazy-Loaded Popups     • Full Video Lesson Pages   │
└────────────────────────────────────────────────────────┘

1. Automated Video Post Ingestion

Publishing a lesson was streamlined into a simple one-step form in the WordPress admin:

• YouTube Metadata Extraction: When a contributor pastes a YouTube URL or video ID, a custom PHP handler calls YouTube’s oEmbed endpoint and Data API to fetch the video title, description, duration, and maximum-resolution thumbnail image.
• Automated Thumbnail Ingestion: The video thumbnail is imported into the WordPress Media Library, cropped into optimized responsive sizes, and attached as the featured post image without manual image handling.
• Location Picker: An integrated admin map picker allows contributors to search for an address or click a map to assign latitude and longitude coordinates stored in post metadata.

2. Multi-Category Curriculum Architecture

To support diverse learning pathways, we created distinct hierarchical taxonomies:

• Subject & Topic: Core disciplines (e.g. Science → Biology → Marine Ecosystems).
• Educational Level: Primary, Secondary, and Higher Education filter tiers.
• Region & Country: Structured geographical classification allowing regional drill-downs.

3. Interactive Geolocation Map

An interactive full-width map serves as the primary visual discovery engine on the homepage and dedicated map explorer:

• Marker Clustering: Utilized Leaflet and marker clustering algorithms to handle hundreds of localized points cleanly without visual clutter at high zoom levels.
• Dynamic Faceted Filtering: Visitors can filter the map by subject or age group; the map updates its markers instantaneously without reloading the page.
• Interactive Video Popups: Clicking a pin opens an interactive popup showing the lesson title, subject badges, and an instant video preview with a direct link to the full lesson article.

4. Performance-First Video Façades

To ensure rapid loading on school networks and mobile devices, we implemented a lightweight video façade pattern:

• Instead of embedding heavy YouTube iframes upfront, lesson cards and article headers render an optimized webp thumbnail with a lightweight SVG play button.
• The YouTube iframe is only requested and initialized when the user clicks play, reducing initial page payload by over 90% and eliminating third-party tracking scripts until playback begins.

Technical Architecture & Implementation

• WordPress Core & Custom Post Types: Dedicated video_lesson custom post type with custom fields for coordinates, YouTube IDs, and supplementary educational worksheets.
• Custom PHP Ingestion & GeoJSON API: Built a custom WordPress REST API controller (/wp-json/edu/v1/map-markers) returning cached GeoJSON features with coordinates, permalinks, and thumbnail URLs.
• Leaflet & OpenStreetMap: Responsive frontend mapping built with vanilla JavaScript and Leaflet, using open-source OpenStreetMap vector tiles with zero third-party map API subscription fees.
• Marker Clustering: Client-side point clustering grouping dense clusters and expanding smoothly on user zoom.
• Accessible Video Embedding: Fully keyboard-accessible video players with ARIA labels and clean semantic markup.

Key Results & Educational Impact

• Publishing Speed: Content creators reduced the time needed to publish a complete video lesson from 20 minutes down to less than 2 minutes.
• Enhanced Student Engagement: The interactive map explorer became the platform’s most engaging entry point, prompting self-directed exploration of global historical and scientific locations.
• Optimal Page Load Times: Replacing upfront YouTube iframes with responsive image façades dropped initial page weight from ~8MB to under 450KB, ensuring snappy performance across classroom Chromebooks and mobile devices.