Okay, I'm going the hell home now. This is insane.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Mapbox GL JS Examples</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.0/mapbox-gl.js'></script>
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';

var videoStyle = {
    "version": 4,
    "sources": {
        "mapbox": {
            "type": "raster",
            "url": "mapbox://mapbox.satellite",
            "tileSize": 256
        },
        "videoSource": {
            "type": "video",
            "url": "https://i.cloudup.com/HixwMjqyIG.mp4",
            "coordinates": [
                [37.56238816766053, -122.51596391201019],
                [37.56410183312965, -122.51467645168304],
                [37.563391708549425, -122.51309394836426],
                [37.56161849366671, -122.51423120498657]
            ]
        }
    },
    "layers": [{
        "id": "background",
        "style": {
            "background-color": "rgb(4,7,14)"
        },
        "type": "background"
    }, {
        "id": "satellite",
        "source": "mapbox",
        "source-layer": "mapbox_satellite_full",
        "type": "raster"
    }, {
        "id": "video",
        "source": "videoSource",
        "type": "raster"
    }]
}

var map = new mapboxgl.Map({
  container: 'map',
  minZoom: 14,
  zoom: 17,
  center: [37.562984, -122.514426],
  bearing: -96,
  style: videoStyle,
  hash: true
});

</script>
</body>
</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.0/mapbox-gl.js