diff --git a/.changeset/nasty-monkeys-flow.md b/.changeset/nasty-monkeys-flow.md
new file mode 100644
index 0000000..7f9adab
--- /dev/null
+++ b/.changeset/nasty-monkeys-flow.md
@@ -0,0 +1,5 @@
+---
+'threlte-uikit': minor
+---
+
+Add `<Video>` Component
diff --git a/README.md b/README.md
index 30a3e80..a6c20c5 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,7 @@ The component internals may be accessed via the `ref` property.
 - [Text](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#text)
 - [SVG](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#svg)
 - [Content](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#content)
+- [Video](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#video)
 
 ## Context providers
 
diff --git a/package-lock.json b/package-lock.json
index 12ecca9..cd0bba4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "threlte-uikit",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "threlte-uikit",
-      "version": "0.1.1",
+      "version": "0.2.1",
       "license": "MIT",
       "dependencies": {
-        "@pmndrs/uikit": "^0.3.8"
+        "@pmndrs/uikit": "^0.3.10"
       },
       "devDependencies": {
         "@changesets/cli": "^2.27.6",
@@ -1494,9 +1494,9 @@
       }
     },
     "node_modules/@pmndrs/uikit": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/@pmndrs/uikit/-/uikit-0.3.8.tgz",
-      "integrity": "sha512-aG8ZKK/SK/11noOeebjcEnNznsA4G1gfKV42wZbymfq7uIpA9Lpjeh8ln1lAbcISZBtcb/uVWJlLw6tHzhRS1Q==",
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/@pmndrs/uikit/-/uikit-0.3.10.tgz",
+      "integrity": "sha512-jR5Q2bHA1yHziIJDhJUgdY0QehOx9g/ZyiKYp50NycVFIdiwBe10ef4WbDiP85/5/ytyybZIxObqF4bZ8XZ0WA==",
       "dependencies": {
         "@preact/signals-core": "^1.5.1",
         "inline-style-parser": "^0.2.3",
diff --git a/package.json b/package.json
index 35e9ee7..d1d9c83 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
-    "@pmndrs/uikit": "^0.3.8"
+    "@pmndrs/uikit": "^0.3.10"
   },
   "peerDependencies": {
     "@threlte/core": ">=7",
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index 8359d4a..b091a92 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -21,7 +21,7 @@
   const innerRef = currentWritable(new Group())
   const { style, properties, defaults } = usePropertySignals<ImageProperties>()
   $: props = { ...$$restProps }
-  $: properties.value = $$restProps
+  $: properties.value = props
 
   const internals = createImage(parent, style, properties, defaults, outerRef, innerRef)
   $: internals.interactionPanel.name = name ?? ''
diff --git a/src/lib/components/Video.svelte b/src/lib/components/Video.svelte
new file mode 100644
index 0000000..d5212ea
--- /dev/null
+++ b/src/lib/components/Video.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  import Image from './Image.svelte'
+  import { SRGBColorSpace, VideoTexture } from 'three'
+  import { useThrelte } from '@threlte/core'
+  import type { VideoProperties } from '@pmndrs/uikit'
+  import { setupVideoElementInvalidation, updateVideoElement } from '@pmndrs/uikit/internals'
+  import type { EventHandlers } from '$lib/Events'
+  import type { ImageRef } from '$lib/useInternals'
+  import { onDestroy } from 'svelte'
+
+  type $$Props = VideoProperties & {
+    ref?: ImageRef
+    src: string | HTMLVideoElement
+    element?: HTMLVideoElement
+  } & EventHandlers
+
+  export let src: $$Props['src']
+  export let ref: $$Props['ref'] = undefined
+  export let autoplay: $$Props['autoplay'] = undefined
+  export let loop: $$Props['loop'] = undefined
+  export let muted: $$Props['muted'] = undefined
+  export let playbackRate: $$Props['playbackRate'] = undefined
+  export let preservesPitch: $$Props['preservesPitch'] = undefined
+  export let volume: $$Props['volume'] = undefined
+
+  const { invalidate } = useThrelte()
+
+  let aspectRatio = 1
+
+  $: providedHtmlElement = src instanceof HTMLVideoElement ? src : undefined
+
+  export let element: HTMLVideoElement | undefined = undefined
+  $: element = providedHtmlElement ?? document.createElement('video')
+  $: setupVideoElementInvalidation(element, invalidate)
+  $: updateVideoElement(element, {
+    src,
+    autoplay,
+    loop,
+    muted,
+    playbackRate,
+    preservesPitch,
+    volume,
+  })
+
+  const updateAspectRatio = () => {
+    aspectRatio = element.videoWidth / element.videoHeight
+  }
+
+  $: {
+    element
+    updateAspectRatio()
+  }
+
+  $: {
+    element.removeEventListener('resize', updateAspectRatio)
+    element.addEventListener('resize', updateAspectRatio)
+  }
+
+  onDestroy(() => element.removeEventListener('resize', updateAspectRatio))
+
+  let texture: VideoTexture | undefined
+
+  $: {
+    if (texture) texture.dispose()
+    texture = new VideoTexture(element)
+    texture.colorSpace = SRGBColorSpace
+  }
+</script>
+
+{#if texture}
+  <Image
+    bind:ref
+    {aspectRatio}
+    {...$$restProps}
+    src={texture}
+  >
+    <slot />
+  </Image>
+{/if}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 0c8466f..3d90700 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -28,6 +28,7 @@ export { default as Image } from './components/Image.svelte'
 export { default as Root } from './components/Root.svelte'
 export { default as SVG } from './components/Svg.svelte'
 export { default as Text } from './components/Text.svelte'
+export { default as Video } from './components/Video.svelte'
 
 // Refs
 export type { ContainerRef, ContentRef, ImageRef, RootRef, SvgRef, TextRef } from './useInternals'
diff --git a/src/routes/Scene.svelte b/src/routes/Scene.svelte
index 27c9d0d..0a0efa9 100644
--- a/src/routes/Scene.svelte
+++ b/src/routes/Scene.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { Root, Container, Text, Image, Content, SVG } from '$lib'
+  import { Root, Container, Text, Image, Content, SVG, Video } from '$lib'
   import { T, useTask } from '@threlte/core'
-  import { PerfMonitor } from '@threlte/extras'
+  import { PerfMonitor, TransformControls } from '@threlte/extras'
   import { OrbitControls, interactivity } from '@threlte/extras'
   import Fullscreen from './Fullscreen.svelte'
   // import { Inspector } from 'three-inspect'
@@ -15,15 +15,18 @@
     elapsed += delta
     val = Math.sin(elapsed * 5) * 20
   })
+
+  let clicked = false
 </script>
 
+<svelte:window on:click={() => (clicked = true)} />
 <PerfMonitor />
 
 <Fullscreen />
 
 <T.PerspectiveCamera
   makeDefault
-  position={[2, 2, 5]}
+  position={[5, 5, 10]}
   on:create={({ ref }) => ref.lookAt(0, 0, 0)}
 >
   <OrbitControls />
@@ -41,6 +44,7 @@
     padding={20}
     width={330 + val}
     height={300}
+    backgroundColor="#fff"
     hover={{
       backgroundColor: '#ccc',
     }}
@@ -91,4 +95,21 @@
   </Root>
 </T.Group>
 
+{#if clicked}
+  <TransformControls position.y={3}>
+    <T.Group>
+      <Root
+        height={200}
+        width={400}
+      >
+        <Video
+          autoplay
+          borderRadius={10}
+          src="/BigBuckBunny_320x180.mp4"
+        />
+      </Root>
+    </T.Group>
+  </TransformControls>
+{/if}
+
 <T.DirectionalLight />
diff --git a/static/BigBuckBunny_320x180.mp4 b/static/BigBuckBunny_320x180.mp4
new file mode 100644
index 0000000..210600b
Binary files /dev/null and b/static/BigBuckBunny_320x180.mp4 differ