Shader Atlas
한국어
▣ Media input

Video Texture

비디오 텍스처

Display a video with customizable playback and object-fit modes.

Also known as: VideoTexturevideo texturevideo layermovie texture

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, VideoTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <VideoTexture
        objectFit="cover"
        url="/samples/clip.mp4" />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, VideoTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <VideoTexture
      object-fit="cover"
      url="/samples/clip.mp4"/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, VideoTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <VideoTexture
    objectFit="cover"
    url="/samples/clip.mp4" />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, VideoTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <VideoTexture
        objectFit="cover"
        url="/samples/clip.mp4" />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'VideoTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/clip.mp4',
      },
    }
  ]
}, { disableTelemetry: true })

Props · VideoTexture

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
urlVideoSet in codehttps://shaders.com/sample.mp4—Upload a video or provide a URL
objectFitObject Fitfillcover · contain · fill · scale-downHow the video should be sized within the viewport
loopLooptrue—Loop the video playback

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Image Texture이미지 텍스처

Display an image with customizable object-fit modes.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Webcam Texture웹캠 텍스처

Display a live webcam feed with customizable object-fit modes.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

HTML In Canvas캔버스 속 HTML

Render live HTML/DOM content as a WebGPU texture layer via the html-in-canvas API. Requires Chrome Canary with chrome://flags/#canvas-draw-element enabled.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Text텍스트

Text with any Google font — multi-line with wrapping, alignment and line height — rendered crisp via a glyph texture.

Picture a moving poster placed on the canvas: the video becomes a base layer that changes over time.

Use `url` to choose the clip and `objectFit` to size it in the frame. The default `fill` fills the frame; `cover` preserves the ratio and crops the edges, while `contain` shows the whole frame. `loop` defaults to `true`, so playback starts again when it ends.

The video draws on its own, so effects placed after it can change the whole clip. Longer clips use more data and battery; provide an accessible HTML player as well when viewers need captions or playback controls.

When to use

Use it for short looping backgrounds, shader treatments on moving footage, or ambient motion. Avoid relying on this layer alone for long-form video or content that needs captions and playback controls.

Open as page ↗