S&box Wiki

Home / Video Backgrounds

Video Backgrounds

Video Backgrounds

To play a video in the background of a panel, set the background-image property to the path of an MP4 or WebM file.

MyVideoPanel { // This path is relative to the Assets folder of your project. background-image: url("ui/video/my_video.mp4"); }

To allow a video of any aspect ratio to fit snugly within the panel, set these properties like so:

background-size: contain; background-position: center; background-repeat: no-repeat;

The video will play once the panel is created. No audio will play, and the video will loop whenever it reaches the end.

The playback progress of background-image videos will persist between rebuilds of the UI, only restarting once the underlying VideoPlayer is garbage collected.

Using a VideoPlayer Texture

For more control over video playback and audio, you'll need to set the background image of the panel to the texture of a VideoPlayer that you control.

using Sandbox.UI; public partial class VideoPlayerPanel : Panel { public bool ShouldLoop { get; set; } = true; private VideoPlayer _player; protected override void OnAfterTreeRender( bool firstTime ) { if ( !firstTime ) return; _player = new VideoPlayer(); // When this video plays, its audio will also automatically play. _player.Play( FileSystem.Mounted, "ui/video/my_video.mp4" ); // Set the background-image property of the style to the VideoPlayer's Texture. Style.SetBackgroundImage( _player.Texture ); // Pause or unpause the video when this panel is clicked. AddEventListener( "onclick", _ => _player?.TogglePause() ); } public override void Tick() { if ( _player is null ) return; // The VideoPlayer texture will not update unless Present is called. _player.Present(); // Loop when the video concludes. if ( ShouldLoop && _player.PlaybackTime >= _player.Duration ) { _player.Seek( 0f ); } } }

Account Management

Special Pages

Wiki List