From f5167330c5c430a96b780bf9247428ea88a500c2 Mon Sep 17 00:00:00 2001
From: Dominik Moritz <domoritz@gmail.com>
Date: Tue, 17 Dec 2024 10:10:59 -0500
Subject: [PATCH] fix: embed video in video tag (#635)

* fix: embed video in video tag

* link to example
---
 docs/.vitepress/theme/Layout.vue | 44 ++++++++++++++++++++++++++++++++
 docs/.vitepress/theme/index.js   |  2 ++
 docs/index.md                    |  4 ---
 3 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 docs/.vitepress/theme/Layout.vue

diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
new file mode 100644
index 00000000..25ebbe04
--- /dev/null
+++ b/docs/.vitepress/theme/Layout.vue
@@ -0,0 +1,44 @@
+<script setup>
+import DefaultTheme from "vitepress/theme";
+</script>
+
+<template>
+  <DefaultTheme.Layout>
+    <template #home-hero-image>
+      <a href="./examples/flights-10m.html">
+        <video autoplay loop muted src="/demo-dark.mp4" class="video dark" />
+        <video autoplay loop muted src="/demo-light.mp4" class="video light" />
+      </a>
+    </template>
+  </DefaultTheme.Layout>
+</template>
+
+<style scoped>
+.video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform:translate(-50%, -50%);
+  max-height: 190px;
+}
+
+html:not(.dark) .video.dark {
+  display:none
+}
+
+.dark .video.light {
+  display:none
+}
+
+@media (min-width: 640px) {
+  .video {
+    max-height: 256px;
+  }
+}
+
+@media (min-width: 960px) {
+  .video {
+    max-height: 320px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 560acc4b..c4121f21 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,9 +1,11 @@
 import DefaultTheme from 'vitepress/theme';
 import Example from './Example.vue';
+import Layout from "./Layout.vue";
 import './custom.css';
 
 export default {
   extends: DefaultTheme,
+  Layout: Layout,
   enhanceApp(ctx) {
     ctx.app.component('Example', Example);
   }
diff --git a/docs/index.md b/docs/index.md
index 6c2cceaa..fbf14d53 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -7,10 +7,6 @@ hero:
     Scalable, interactive data visualization
   tagline: |
     Mosaic is an extensible framework for linking databases and interactive views.
-  image:
-    dark: /demo-dark.mp4
-    light: /demo-light.mp4
-    alt: Mosaic visualizing flight data
   actions:
     - theme: brand
       text: What is Mosaic?