Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Video Viewer

VideoViewer opens a video in a focused overlay or lightbox above the current page. Use it when a thumbnail, preview card, or compact inline player should open a larger viewing experience with a close control, optional title, caption, description, and playback controls. Use VideoPlayer when video should stay inline in the page layout.

Key Features:
  • Opens video previews in a full-screen overlay.
  • Supports plain or templated title, caption, and description content.
  • Passes orientation and playback options to the underlying VideoPlayer.
  • Works well with cards, grids, carousels, media libraries, and attachment previews.

Compose preview layouts with Card, Grid, Carousel, or your own layout. VideoViewer is not a generic modal, form dialog, or carousel by itself.

PropTypeDefault
sourceUrl
The URL of the video source
string
title
The title of the video
string
caption
The caption of the video
string
description
The description of the video
string
orientation
The orientation of the video player
VideoViewerOrientationundefined
autoPlay
Whether the video should start playing automatically
booleanfalse
showPlayButton
Whether to show the play/pause button
booleantrue
showSpeaker
Whether to show the volume/mute button
booleantrue
showFullscreen
Whether to show the fullscreen button
booleantrue
showDurationSlider
Whether to show the video progress slider
booleantrue
muted
Whether the video is initially muted
booleanfalse