YouTube Player — How it works
The video player is not a custom HTML5 player — it is a fully-featured YouTube embed powered by the YT IFrame API with extra controls layered on top by A3KM's own JS.
allow="picture-in-picture" attribute on the iframe. Works on supported browsers natively — no custom JS needed.isLiked boolean state. Tapping the like button toggles heart icon color — stored per-session.youtube_api_key).renderRelatedVideos() displays cards below the player. Thumbnails come from YouTube CDN: img.youtube.com/vi/[ID]/mqdefault.jpgPlayer UI Breakdown
Every element visible when watching a video — from the player to the action bar below.
YouTube IFrame Player
Embedded using YT.Player API. Has autoplay=1, rel=0, modestbranding=1, playsinline=1. The allow attribute enables PiP.
Progress Bar
Native YouTube progress bar inside the iframe. Red filled bar matches A3KM's color scheme.
Action Row
Like (isLiked toggle), Share, Bookmark (localStorage), and open-in-YouTube buttons. Rendered outside the iframe by A3KM JS.
Description Section
descriptionSection div. Shows the content's own description field — not pulled from YouTube, stored in content.json.
Related Videos Rail
renderRelatedVideos() populates this list. Thumbnails from YouTube CDN — no API call needed for these.
PiP Badge
Indicates Picture-in-Picture is available. Tap the browser's PiP button while the video is playing to float it.
Zone-Based Gesture System
The video player uses a 3-zone swipe gesture system on mobile — each horizontal region of the player screen has its own control. A transparent .vp-gesture layer sits over the entire player with touch-action: none to intercept all touch events before YouTube handles them.
requestAnimationFrame batching for smooth 60fps updatesplayer.setVolume(). Uses RAF batching for smooth 60fps response — no jank.body.vp-landscape-fs class is added. CSS hides all page siblings except #vpWrapper — clean immersive view.!playerReady), a mini-remote overlay appears instead of silently failing. Lets you control playback instantly.The .vp-gesture overlay has touch-action: none set via CSS. This prevents the browser's default touch behaviors (scroll, pinch-zoom, double-tap-zoom) from conflicting with the zone gesture recognition — especially important in landscape orientation.
How the Player Initializes
From page load to first frame — what happens behind the scenes.
Page opens with video ID from URL
The viewer reads the ?id= query parameter. Matches against the loaded videos array from content.json.
YT IFrame API script injected
A <script src="https://www.youtube.com/iframe_api"> tag is dynamically appended to document.head.
5-second fallback timer starts
If onYouTubeIframeAPIReady hasn't fired within 5 seconds, a plain <iframe> is inserted as fallback — no API dependency.
YT.Player() created
Called with playerVars: { autoplay:1, rel:0, modestbranding:1, playsinline:1 }. The allow attribute includes picture-in-picture.
Description + Related rendered
descriptionSection and relatedSection divs are populated with content data. renderRelatedVideos() uses YouTube CDN thumbnails.
API enrichment (if key available)
If youtube_api_key exists in localStorage, a YouTube Data API v3 call fetches view counts and likes. formatViews() and formatLikes() format the numbers.
Keyboard Controls
These are native YouTube shortcuts that work inside the embedded player.
| Key | Action | Notes |
|---|---|---|
| Space / K | Play / Pause | Click the player first to focus it |
| F | Fullscreen | Exits with Escape |
| ← → | Seek ±5 seconds | Hold for faster seek |
| ↑ ↓ | Volume ±5% | While player is focused |
| M | Mute / Unmute | |
| 0–9 | Jump to 0%–90% | Number keys seek to that percentage |
| , / . | Frame step ±1 | When paused |
Mobile vs Desktop
The video player behaves differently across platforms.
- playsinline=1 — plays inside the page, not fullscreen auto-launch
- Zone gestures: left⅓ brightness, right⅓ volume, center swipe = fullscreen
- Single tap shows controls only — no accidental pause
- Landscape FS hides all page UI via
body.vp-landscape-fs - PiP fallback mini-remote if player not yet ready
- Touch to tap Like / Share / Bookmark
- Expandable description section
- No keyboard shortcuts (no keyboard)
- Full keyboard shortcut set works
- PiP via right-click context menu or browser button
- Larger player area — more immersive
- Action buttons always visible below player
- Hover effects on related video cards
- Copy-link via Share button (Clipboard API)
Lesser-Known Tricks
Every YouTube video's thumbnail is available at https://img.youtube.com/vi/[VIDEO_ID]/mqdefault.jpg — no API key needed. A3KM uses this for related video cards, keeping them fast and free.
If YouTube's IFrame API script doesn't load (firewall, network issue) within 5 seconds, the page automatically switches to a plain <iframe>. The video still plays — you just lose the extra JS layer.
While watching a video, leave the app or switch tabs. The video continues floating as a PiP overlay. This works because the iframe has allow="picture-in-picture" — it's a browser-native feature, not custom code.
If you trigger PiP before the YouTube player has finished initializing (playerReady = false), a mini-remote control overlay appears automatically. This lets you pause, seek, and control volume without waiting — the overlay disappears once the main player is ready.
Unlike most video players, tapping the center of the player does not toggle play/pause. A single tap on the .vp-gesture overlay only shows or hides the control bar. To pause, use the play/pause button in the control bar itself. This prevents accidental pausing.
The isLiked flag is an in-memory JS variable — not persisted to localStorage. It resets on page refresh. This is intentional — the like button is a quick quality-signal UI element, not a tracking system.
Code Reference
Other Feature Guides
More deep-dives into A3KM Studio features — shortcuts, hidden tricks, mobile vs desktop comparisons and code references.