diff --git a/js/main.js b/js/main.js
index 8e24c64..50c8943 100644
--- a/js/main.js
+++ b/js/main.js
@@ -40,24 +40,30 @@ function parseQuery() {
     if (window.location.hash.length > 1) {
         const qs = window.location.hash.substring(1);
         const query = new URLSearchParams(qs);
-        const source = query.get('source');
-        const sourceType = query.get('source_type');
-        const captions = query.getAll('captions');
-        const captionLanguages = query.getAll('caption_langs');
-        const captionLabels = query.getAll('caption_labels');
-        if (!source || !sourceType) {
-            displayError('missing source or sourceType parameter');
+
+        if (query.has('source')) {
+          const source = query.get('source');
+          const sourceType = query.get('source_type');
+          const captions = query.getAll('captions');
+          const captionLanguages = query.getAll('caption_langs');
+          const captionLabels = query.getAll('caption_labels');
+          if (!source || !sourceType) {
+              displayError('missing source or sourceType parameter');
+          }
+          if (captions.length !== captionLanguages.length || captions.length !== captionLabels.length) {
+              displayError('mismatch between captions, caption_langs and caption_labels length');
+          }
+          return {
+              source, sourceType,
+              captions, captionLanguages, captionLabels,
+          }
+        } else if (query.has('base')) {
+          return {
+            base: query.get('base'),
+          }
         }
-        if (captions.length !== captionLanguages.length || captions.length !== captionLabels.length) {
-            displayError('mismatch between captions, caption_langs and caption_labels length');
-        }
-        return {
-            source, sourceType,
-            captions, captionLanguages, captionLabels,
-        }
-    } else {
-        return null;
     }
+    return null;
 }
 
 function parseTimestamp(timestamp) {
@@ -79,7 +85,7 @@ function formatTimestamp({ hours, mins, secs, frac }) {
 
 const query = parseQuery();
 
-if (query !== null) {
+if (query !== null && query.source) {
     const {
         source, sourceType,
         captions, captionLanguages, captionLabels
@@ -131,9 +137,16 @@ if (query !== null) {
         });
     });
 } else {
-    const BASE = '/videos/';
+    let base = '/videos/';
+    if (query !== null && query.base) {
+        base = query.base;
+    }
 
-    fetch(BASE+'media.json')
+    if (!base.endsWith('/')) {
+        base = base + '/';
+    }
+
+    fetch(base+'media.json')
         .then(res => res.json())
         .then(({ videos }) => {
             const ul = document.createElement('ul');
@@ -141,9 +154,9 @@ if (query !== null) {
             for (const video of videos) {
                 //if (!video.filename.includes('telescope')) continue;
                 const query = [
-                    ['source', BASE+video.filename],
+                    ['source', base+video.filename],
                     ['source_type', 'video/mp4'],
-                    ...video.subtitles.map(subName => ['captions', BASE+subName]),
+                    ...video.subtitles.map(subName => ['captions', base+subName]),
                     ...video.subtitles.map(subName => {
                         const s = subName.split('.');
                         return ['caption_langs', s[s.length - 2]];
@@ -158,7 +171,7 @@ if (query !== null) {
                 durationEle.classList.add('thumbnail-duration');
                 durationEle.innerText = formatTimestamp(duration);
                 const img = document.createElement('img');
-                img.src = BASE+thumbnail;
+                img.src = base+thumbnail;
                 img.classList.add('thumbnail');
                 const qs = new URLSearchParams(query).toString();
                 const ele = document.createElement('li');