diff options
| author | Hailey <me@haileyok.com> | 2024-02-06 11:05:17 -0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-02-06 11:05:17 -0800 |
| commit | 856f80fc6df731b1dbe9efa289ad6a4f728d4e0d (patch) | |
| tree | 815d7ed5b083fe36cca321efa60042d14b22c16e /bskyweb/static | |
| parent | a9ab13e5a936c4d917b878bd53f4e536fa8c95f8 (diff) | |
| download | voidsky-856f80fc6df731b1dbe9efa289ad6a4f728d4e0d.tar.zst | |
fix some youtube videos not properly loading (#2726)
* add player iframe to bskyweb * iframe for youtube content * update tests * ts error
Diffstat (limited to 'bskyweb/static')
| -rw-r--r-- | bskyweb/static/iframe/youtube.html | 49 |
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> |