Documentation

Support

Unity Studio

Open Unity Studio

Unity Studio

Video

Add videos to your User Interface (UI) with a Video element.
Read time 2 minutesLast updated 4 hours ago
Use the Video element to display videos inside your User Interface (UI), which overlays the scene. This element lets you include video content from a file or from the web directly in your app. This can help you create informative apps or simulate in-world screens. For example, you can use the Video element to display:
  • Instructional, training, and onboarding videos
  • Cutscenes
  • Splash screens and intros
  • Video animations for UI interactions
These videos overlay the scene. To add videos within the scene, refer to Video Player component. You can import videos in the same way you import other assets. For instructions, refer to Import assets into your project.

Supported video file formats

Unity Studio lets you import the following video file formats: 
  • .mp4
  • .m4v
  • .mov
  • .mpg
  • .mpeg
  • .webm
  • .ogv

Add a Video UI element to your scene

To add videos to your UI, do one of the following:
  • In the Hierarchy panel, go to the top left and select Add (+) > UI > Video Player.
  • Drag the Video Player object in the 
    Built-in Assets
    folder into the Hierarchy panel.
In both cases, Unity Studio creates a Video element as a child of the UI Canvas.

The Video UI element components

The Video element automatically contains the following components:

Component

Description

UI TransformUse to position, rotate, and resize the Video element in Edit mode. You can change the size, rotations, and positions in the following ways:
  • Change the values in the component's text fields.
  • Click and drag parts of the rectangle on the canvas:
    • Resize: Drag the corners and edges.
    • Reposition: Click and drag inside the rectangle.
    • Rotate: Hover above the corners until the rotation symbol shows, then click and drag.
Video PlayerRenders the video in the UI according to your settings.
Raw ImageVisualize the size and position of the video and change its color.

Video Player component properties

The following properties are available for you to customize in the Video element's Inspector panel:

Property

Description

SourceChoose whether to play a video from a file or from a URL. The options are:
  • Video Asset: Select to play a video file from your project.
  • URL: Select to play a video from a website.
Video AssetAttach a video file to play. This setting only appears if you set Source to Video Asset.
URLEnter a direct URL to a video file hosted online. The URL must point directly to the video and typically ends with the file extension, such as .mp4. This is useful if you don’t want to store large video files locally. This option is only available when Source is set to URL.
Play On AwakeChoose whether to start the video when the scene starts or wait until something else triggers the start (for example, use a Logic script to play the video.)
LoopEnable to make the video play again when it reaches the end. Disable to play the video once.
Playback SpeedChoose the speed of the video. Range from 0 to 10. Set to 
1
for the original video's playback speed. Set below 
1
to slow the video and above 
1
to make the video faster.
VolumeChange how loud the video's sound is. Set to 0 for no sound, and 1 for maximum volume.
Aspect RatioControl how the video fits into the UI Transform rectangle. You have the following options:
  • No Scaling: Keep the video's original aspect ratio.
  • Fit Vertically: Scale the video so its height fits the rectangle. This might result in a pillarbox effect if the width doesn't match.
  • Fit Horizontally: Scale the video's width to fit the rectangle. This might result in a letterbox effect if the height doesn't match.
  • Fit Inside: Scale the entire video to fit within the rectangle without cropping. Might have a letterbox effect.
  • Fit Outside: Scale the video to cover the entire rectangle. Might crop parts of the video that overflow.
  • Stretch: Scale independently in X and Y to fill the rectangle. Doesn't preserve aspect ratio. Might distort the image.
Render ModeChoose how the Video Player displays the video. The options are:
  • Camera Far Plane: Renders the video on the camera’s far plane, behind all objects in the scene. This is useful for background videos.
  • Camera Near Plane: Renders the video on the camera’s near plane, in front of all objects in the scene. This causes the video to cover the entire view.
  • Render Texture: Renders the video to a Render Texture, which you can then display elsewhere, such as on a UI element or material. This option is default if you create a UI Video element.
  • Material Override: Renders the video onto a material, which allows you to display it on the surface of an object. The video is projected onto each face of the object. This is the default setting when you add a VideoPlayer component to your non-UI object.

Raw Image component properties

Property

Description

TextureUse this setting to visualize the position, rotation, and size of the video's image. Any texture you choose is ignored.
ColorChange the tint color to apply to the video.
Raycast TargetDetermine whether the video can be detected by raycasts, such as mouse clicks or other UI interaction checks.

Additional resources