--- a/src/VideoSection.ts	Mon Mar 20 20:50:33 2023 -0700
+++ b/src/VideoSection.ts	Sat Mar 25 16:01:56 2023 -0700
@@ -1,5 +1,4 @@
-
-import { LitElement, html } from "lit";
+import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "shaka-video-element";
 
@@ -7,20 +6,47 @@
 export class VideoSection extends LitElement {
   @property({ type: String }) manifest: string | undefined;
   @property({ type: String }) title: string = "(unknown)";
+  @property({ type: String }) big: boolean = false;
+
+  static styles = [
+    css`
+      section {
+        background: #ffffff14;
+        display: inline-block;
+        padding: 10px;
+        color: white;
+        width: 300px;
+      }
+      #video.big {
+        z-index: 2;
+        position: fixed;
+        left: 0px;
+        top: 0px;
+      }
+    `,
+  ];
   render() {
+    const vidCls = this.big ? "big" : "";
+    const inx = 20,
+      iny = 50;
+    const inw = 300,
+      inh = 150;
+    const outw = 720,
+      outh = 480;
+    const scl = outh / inh;
+    const tx = (document.body.clientWidth - inw * scl) / 2,
+      ty = (document.body.clientHeight - inh * scl) / 2;
+    const style = this.big ? `transform: translate(${-inx - inw / 2}px,${-iny - inh / 2}px) scale(${outh / inh}) translate(${tx}px,${ty}px);` : "";
+    console.log(document.body.clientWidth);
     return html`
-      <style>
-        section {
-          background: #ffffff14;
-          display: inline-block;
-          padding: 10px;
-          color: white;
-        }
-      </style>
       <section>
         <h1>${this.title}</h1>
-        <shaka-video id="video" width="720" height="480" src="${this.manifest}" controls></video>
+        <shaka-video class="${vidCls}" style="${style}" id="video" width="720" height="480" src="${this.manifest}" controls></video>
       </section>
     `;
   }
+  updated() {
+    // const  el=this.querySelector("#video")
+    // console.log(el.clientWidth);
+  }
 }