Lily/Video: fix videos rendering as pure black (#1692)

by appending them into the DOM in a place that doesn't have display: none;
seems to fix TurboWarp/scratch-render#12

extensions/Lily/Video.js

@@ -15,6 +15,21 @@
   const renderer = vm.renderer;
   const Cast = Scratch.Cast;
 
+  // In some versions of Chrome, it seems that trying to render a <video> returns pure black
+  // if it's not in the DOM in a place the browser thinks is visible. That means we can't
+  // use display: none.
+  // See https://github.com/TurboWarp/scratch-render/issues/12
+  const elementContainer = document.createElement("div");
+  elementContainer.className = "tw-extensions-lily-videos-container";
+  elementContainer.style.pointerEvents = "none";
+  elementContainer.style.position = "absolute";
+  elementContainer.style.opacity = "0";
+  elementContainer.style.width = "0";
+  elementContainer.style.height = "0";
+  elementContainer.style.visibility = "hidden";
+  elementContainer.ariaHidden = "true";
+  document.body.appendChild(elementContainer);
+
   const BitmapSkin = runtime.renderer.exports.BitmapSkin;
   class VideoSkin extends BitmapSkin {
     constructor(id, renderer, videoName, videoSrc) {
@@ -50,6 +65,10 @@
       this.videoElement.src = videoSrc;
       this.videoElement.currentTime = 0;
 
+      // <video> must be in the DOM for it to render (see comments above)
+      elementContainer.appendChild(this.videoElement);
+      this.videoElement.tabIndex = -1;
+
       this.videoDirty = true;
 
       this.reuploadVideo();
@@ -106,6 +125,7 @@
     dispose() {
       super.dispose();
       this.videoElement.pause();
+      this.videoElement.remove();
     }
   }