Simplest Videogular Player


See the Pen KmDIE by Two Fucking Developers (@2fdevs) on CodePen.


Preparing your app

Once you’ve created your Angular application (myApp) and you have a controller for your view (HomeCtrl) you can start preparing your Videogular player.

The minimum requirements for Videogular are a theme and a video/audio source.


Your theme should be a relative or absolute URL to a CSS file. You can use Videogular Theme or create your own themes.

By default, Videogular will always fill its space to 100% like a Google Maps object. This allows you to put Videogular in a container and control by yourself the dimensions. In this demo you have a “videogular-container” class that sets a 16:9 scale proportions.


Your media source should be an array of trusted resource urls. You can create a trusted url with $sce service with the method $sce.trustAsResourceUrl(). Videogular will take this array and will choose the first playable file for your browser.

All Videogular properties are bindable, so if you change your config.sources object you can change your media sources on the fly. This also applies to tracks, so you can change pretty easily your subs and select which one is default.