← Lab index
THREE.JS / CSS3D YOUTUBE

Four native video faces around a CSS3D room.

A source-backed DOM-renderer contract for the pinned Three.js YouTube example: real iframe media surfaces become CSS3D objects, TrackballControls owns the camera, and a transparent blocker temporarily captures iframe input while the camera is dragged.

This route claims the native iframe faces, pinned video IDs and placements, CSS3DRenderer/CSS3DObject ownership, TrackballControls at rotate speed 4, resize projection, drag-time pointer blocker, bounded sampling, camera reset, face reload, and teardown only. YouTube network availability, exact page pixels, official main.css presentation, device/browser matrices, performance generalization, and whole-example fidelity remain separate.

Sources: official CSS3D YouTube example · CSS3DRenderer · TrackballControls