update

package.json

@@ -9,12 +9,13 @@
   "keywords": [
     "astro-component",
     "withastro",
-    "video-player",
+    "video",
+    "player",
     "hls-support",
     "live-streaming"
   ],
   "type": "module",
-  "version": "0.4.6",
+  "version": "0.4.61",
   "exports": {
     ".": "./index.ts"
   },

test/astro.config.mjs

@@ -7,5 +7,8 @@ export default defineConfig({
             hmr: false
         }
     },
-    integrations: [vue()]
+    integrations: [vue()],
+    devToolbar: {
+        enabled: false
+    }
 });

test/src/pages/index.astro

@@ -50,7 +50,7 @@ import {
 	<p>Subtitles shown are part of the video itself, not the player.</p>
 </Info>
 
-<style>
+<style is:global>
 body {
 	background: #010101;
 	color: white;
@@ -59,6 +59,10 @@ body {
 		color: white;
 	}
 }
+.video-container {
+  position: relative;
+  margin: 40px;
+}
 </style>
 
 <script is:inline>

test/src/pages/live.astro

@@ -21,6 +21,10 @@ body {
 		color: white;
 	}
 }
+.video-container {
+  position: relative;
+  margin: 40px;
+}
 </style>
 
 <Switcher/>

test/src/pages/milieu.astro

@@ -63,7 +63,7 @@ body {
 }
 .video-container {
   position: relative;
-  margin: 80px;
+  margin: 40px;
 }
 </style>
 

test/src/pages/multi.astro

@@ -75,6 +75,10 @@ body {
 		color: white;
 	}
 }
+.video-container {
+  position: relative;
+  margin: 40px;
+}
 
 body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > center:nth-child(8),
 body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > center:nth-child(8),

test/src/pages/with-separate-audio.astro

@@ -20,11 +20,11 @@ import Switcher from '@components/Switcher.astro'
 
 <Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
 	<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
-	<p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
-	<p>This demo also pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>
+	<p>This demo is using the video source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
+	<p>This demo is using the audio source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>
 </Info>
 
-<style>
+<style is:global>
 body {
 	background: #010101;
 	color: white;
@@ -33,4 +33,8 @@ body {
 		color: white;
 	}
 }
+.video-container {
+  position: relative;
+  margin: 40px;
+}
 </style>