1 files changed, 49 insertions, 0 deletions
diff --git a/bskyweb/static/iframe/youtube.html b/bskyweb/static/iframe/youtube.html
new file mode 100644
index 000000000..f2ada2ec5
--- /dev/null
+++ b/bskyweb/static/iframe/youtube.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html><meta name="viewport" content="width=device-width, initial-scale=1" />
+<style>
+    body {
+        margin: 0;
+    }
+    .container {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 56.25%;
+    }
+    .video {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+</style>
+<div class="container"><div class="video" id="player"></div></div>
+<script>
+  const url = new URL(window.location)
+  const viewport = document.querySelector("meta[name=viewport]")
+
+  const tag = document.createElement("script")
+  tag.src = "https://www.youtube.com/iframe_api"
+  const firstScriptTag = document.getElementsByTagName('script')[0];
+  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+  let player
+  function onYouTubeIframeAPIReady() {
+    player = new YT.Player('player', {
+      width: "1000",
+      height: "1000",
+      videoId: url.searchParams.get('videoId'),
+      playerVars: {
+        autoplay: 1,
+        start: url.searchParams.get('start'),
+        rel: 0,
+        loop: 0,
+        playsinline: 1,
+        origin: url.origin
+      },
+    });
+  }
+  function onPlayerReady(event) {
+    event.target.playVideo();
+  }
+</script>