let's experiment with sticky

2 files changed, 12 insertions, 3 deletions

diff --git a/local.css b/local.css
index 56834706..d2abba3b 100644
--- a/local.css
+++ b/local.css
@@ -135,5 +135,12 @@ a.highlight { background-color: yellow }
 
 .transcript .sticky-video { display: none }
 @media only screen and (min-width: 64.063em) {
-		.transcript .sticky-video { position: sticky; top: 0 }
+		.transcript .sticky-video {
+				position: sticky;
+				top: 0;
+				display: block;
+				margin-left: calc(47vw + 30rem);
+				width: calc(45vw - 30rem);
+				float: left;
+		}
 }
diff --git a/templates/page.tmpl b/templates/page.tmpl
index 05fade46..4d8a8d86 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -416,9 +416,11 @@ Last edited <TMPL_VAR MTIME>
  /* videoType: mainVideo, qanda */
  function addStickyVideo(videoType) {
 	 const transcriptDiv = document.querySelector('.transcript-' + videoType);
-	 const video = document.querySelector('.vid.' + videoType);
+	 const video = document.querySelector('.vid.' + videoType + ' video');
 	 if (!video || !transcriptDiv) return;
-	 if (transcriptDiv.querySelector('video')) return; // already has it
+	 if (transcriptDiv.querySelector('.vid'))
+		 transcriptDiv.querySelector('.vid').remove();
+	 // already has it
 	 // TODO: Make a copy of the video and place it at the start of the btranscript div, positioned to the left, and sticky, but only on large screens.
 	 const videoCopy = video.cloneNode(true);
 	 transcriptDiv.prepend(videoCopy);