Side By Side 3D

Create a simple simulated 3D effect by duplicating the video element and using a pixel offset instead of a time delay.

1. Paste the code below into the developer console:

   3d-sbs/embedded.min.js

   Line 1 in 081b5fc

   (()=>{const e=document.querySelector("video"),t=document.createElement("div"),n=document.createElement("canvas"),o=n.getContext("2d"),d=30;document.body.append(t),document.body.append(n),n.id="SBSMirroredVideo";const a=document.createElement("style");a.textContent="* {background:#000 !important;}body {overflow:hidden;}body *:not(#SBSMirroredVideo) {opacity:0;pointer-events:none;}",document.body.append(a),function e(t){return t.style.opacity=1,t.style.pointerEvents="auto","BODY"!==t.parentElement.tagName?e(t.parentElement):t}(e);const[i]=e.captureStream().getVideoTracks(),r=new MediaStreamTrackProcessor(i).readable.getReader();function c(){r.read().then((async({done:t,value:n})=>{if(n){const e=await createImageBitmap(n);o.drawImage(e,0,0),n.close()}t||e.paused||c()}))}function s(){setTimeout((()=>{const t=e.videoWidth,o=e.videoHeight,a=t/o,i=window.innerWidth/2/a;e.style.cssText=`position:fixed;left:0;top:50%;width:50vw;height:${i}px;transform:translate(0, -50%);z-index:10000;opacity:1 !important;`,n.style.cssText=`position:fixed;left:50vw;top:50%;width:calc(50vw + ${d}px);height:${i}px;transform:translate(0, -50%);z-index:10000;`,n.width=t,n.height=o}),500)}window.addEventListener("resize",s),e.addEventListener("play",c),s(),c()})();

2. Exit the developer console and enter browser full-screen mode (not video full-screen).

Note: This method does not work with DRM-protected content.