fix: embed video in video tag (#635)

* fix: embed video in video tag

* link to example

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>

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);
   }

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?