How to Customize your Portal's Playback Pages
Branding is essential to your VIDIZMO Portal as it significantly impacts your users' experience and strongly emphasizes your brand voice, theme, or tone. VIDIZMO provides the tools to customize various aspects of your Portal, such as your Portal thumbnail or header.
In addition, you can customize various aspects of your Portal's user interface (UI) using custom CSS. The UI elements each have a predefined CSS class that you can utilize when writing your CSS code for customizations.
VIDIZMO provides CSS classes to customize the playback pages to display different Media or Evidence formats. Each playback page is tailored to the format type you open and has its own unique set of CSS classes. VIDIZMO provides classes to customize playback pages for videos, images, and documents.
Some UI elements on these pages, like share buttons and related media sections, are common across all playback pages. Other UI elements, such as download buttons and transcription or object detection tabs, are displayed based on the Media or Evidence Settings and if it has specific Insights generated.
Note: Please note that the class availability depends on the type of VIDIZMO product you are using, whether you have the required permissions, and whether a certain feature is available in your product.
Prerequisites
- Ensure that you have Portal Management permission to access Portal settings.
- To use Custom CSS, ensure you have access to the Branding feature via group permission or CAL.
CSS Customization Scenarios
- Open the navigation menu via the button on the top left.
- Click the 'Admin' dropdown.
- Click 'Portal Settings.'
- Click Branding.
- Select Customize.
- Enter the code for your customizations in the Custom CSS section.
- Click the 'Update' button to apply the modifications. We recommend refreshing your browser to see the changes on your Portal.
Note: To obtain the CSS class of a specific UI element, right-click and inspect it using your browser's developer tools. A CSS class is indicated by the 'vdz-' prefix.
Scenario 1: Altering Background of Insights Page
- In this example, we will use the CSS selector
.vdz-insights-images to modify the background of the Insight images.
- Here is a code snippet for modifying the background by changing its color and border radius.
.vdz-insights-images {
background-color: #e8e9ed;
border-radius: 5px;
}
Scenario 2: Hiding Buttons on Playback Pages
- To demonstrate hiding a UI element, we will use the
.vdz-collection-btn selector to hide the 'Add to Collections' button.
- Paste the following code snippet in the custom CSS section.
.vdz-collection-btn {
display: none;
}
Scenario 3: Customization Using CSS Nesting
Some UI elements cannot be customized directly as they are made up of multiple classes, you need CSS nesting to perform your customization.
- Let us take the 'Add to Collection' button on the playback page for instance.
- You can inspect it using your browser's dev tools to see that it has a base class of
vdz-collection-btn and classes for two additional elements called fa-circle and fa-layer-group.
- Here is a sample snippet on how you can change the colors for these two elements.
.vdz-collection-btn {
.fa-circle {
color: purple !important;
}
.fa-layer-group {
background-color: red !important;
}
}
Note: In addition to customizing UI elements using their CSS classes, you can write code to make these customizations specific to CAL on your VIDIZMO Portal. Learn more here: How to Perform CAL Specific CSS Customizations
CSS Classes for All Playback Pages
| Class | Description |
|---|
| vdz-mashup-title | allows modification of the mashup titles present on the mashup card |
| vdz-mashup-views | allows modification of the mashup views present on the mashup card |
| vdz-report-btn | allows modification of the 'report' button present on the playback page of mashups |
| vdz-addtocalendar-btn | allows modification of the 'Add to Calendar' button that is present on the playback page of a Live session |
| vdz-favorite-btn | allows modification of the 'favorites' button present on the playback page of mashups |
| vdz-share-btn | allows modification of the 'Share' button present on the playback page of mashups |
| vdz-like-btn | allows modification of the 'Like' button present on the playback page of mashups |
| vdz-learningplan-btn | allows modification of the 'Add to Learning Plan' button present on the playback page of mashups |
| vdz-playlist-btn | allows modification of the 'Add to My Playlist' button present on the playback page of mashups |
| vdz-collection-btn | allows modification of the 'Add to Collection' button present on the playback page of mashups |
| vdz-studiospace-btn | allows modification of the 'Studio Space' button present on the playback page of mashups |
| vdz-menu-icon | allows modification of the context menu present on the playback page of mashups |
| vdz-download-btn | allows modification of the download button present on the playback page of mashups |
| vdz-mashup-description | allows modification of the mashup description present on the playback page of mashups |
| vdz-actionmenu-icon | allows modification of the action/context menu present on the card of all mashups |
CSS Classes for Video Playback Page
| Class | Description |
|---|
| vdz-playersetting-btn | allows modification of the settings button present on the video player (on mashup playback page) |
| vdz-playercc-btn | allows modification of the closed caption icon/button present on the video player (on mashup playback page) |
| vdz-playertheatermode-btn | allows modification of the theater mode button present on the video player (on mashup playback page) |
| vdz-playerbookmark-btn | allows modification of the bookmark button present on the video player (on mashup playback page) |
| vdz-playercomment-btn | allows modification of the comment button present on the video player (on mashup playback page) |
| vdz-playeroverlay-btn | allows modification of overlay button appearing for comments/annotations on video (on playback page) |
| vdz-playerprevious-btn | allows modification of the previous item button on the video player (on mashup playback page) in a playlist |
| vdz-playernext-btn | allows modification of the next item button on the video player (on mashup playback page) in a playlist |
| vdz-playerseekbackward-btn | allows modification of the seek backward button on the video player (on mashup playback page) |
| vdz-playerseekforward-btn | allows modification of the seek forward button on the video player (on mashup playback page) |
| vdz-playershowannotation-btn | allows modification of the annotation button present on the video player (on mashup playback page) |
CSS Classes for Insights Tabs
| Class | Description |
|---|
| vdz-transcription-tab | allows modification of the transcriptions tab displayed on a mashup's playback page |
| vdz-chapters-tab | allows modification of the chapters tab displayed on a mashup's playback page |
| vdz-insights-tab | allows modification of the AI Insights tab displayed on a mashup's playback page |
| vdz-recordedchat-tab | allows modification of the live chat tab that is displayed on a live's playback page |
| vdz-map-tab | allows modification of the geo spatial map tab shown on drone footage |
CSS Classes for Insights Interface
| Class | Description |
|---|
| vdz-language-dropdown | allows modification of language selection dropdown on the Insights tab on mashup's playback page |
| vdz-searchinsights-bar | allows modification of search bar on the Insights tab on mashup's playback page |
| vdz-search-icon | allows modification of the search bar icon present on the Insights tab on mashup's playback page |
| vdz-insights-images | allows modification of the images indicating visual insights that are obtained by 'AI Detection' activities |
CSS Classes for Chapters
| Class | Description |
|---|
| vdz-chapter-thumbnail | allows modification of the chapter thumbnails present on Chapters in their tab on playback page |
| vdz-chapter-title | allows modification of chapter titles present on Chapters in their tab on the playback page |
| vdz-chapter-timestamp | allows modification of chapter timestamps present on Chapters in their tab on the playback page |
| vdz-chaptershare-btn | allows modification of the share button after selecting a chapter from their tab on the playback page |
| vdz-chapterloop-btn | allows modification of the loop button after selecting a chapter from their tab on the playback page |
CSS Classes for Image Playback Page
| Class | Description |
|---|
| vdz-relatedmedia-tab | allows modification of the related media tab displayed on a mashup's playback page |
| vdz-insights-tab | allows modification of the insights tab displayed on a mashup's playback page |
CSS Classes for Document Playback Page
| Class | Description |
|---|
| vdz-relatedmedia-tab | allows modification of the related media tab shown on the document viewer (document playback page) |
| vdz-comments-tab | allows modification of the comments tab shown on the document viewer (document playback page) |
| vdz-comments-btn | allows modification of the comments button present on document viewer (document playback page) |
| vdz-relatedmedia-btn | allows modification of the related media button present on document viewer (document playback page) |
CSS Classes for Document Viewer Interface
| Class | Description |
|---|
| vdz-previouspage-btn | allows modification of previous page button present on the document viewer |
| vdz-nextpage-btn | allows modification of next page button present on the document viewer |
| vdz-zoomin-btn | allows modification of zoom in button present on the document viewer |
| vdz-zoomout-btn | allows modification of zoom out button present on the document viewer |
| vdz-fittopage-btn | allows modification of fit to page button present on the document viewer |
| vdz-reset-btn | allows modification of reset button present on the document viewer |
| vdz-thumbnail-btn | allows modification of thumbnail present on the document viewer |
| vdz-dropdown-btn | allows modification of dropdown button present on the document viewer |
| vdz-rotateright-btn | allows modification of rotate right button accessed from the 'Reset' button on the document viewer |
| vdz-rotateleft-btn | allows modification of rotate left button accessed from the 'Reset' button on the document viewer |
| vdz-fullscreen-btn | allows modification of fullscreen button present on the document viewer |
CSS Classes for Collections
| Class | Description |
|---|
| vdz-map-tab | allows modification of the 'Geo spatial data' tab that appears on the mashup (drone footage) playback page |
CSS Classes for Playlists
| Class | Description |
|---|
| vdz-playlist-tab | allows modification of playlist tab after viewing a mashup in a playlist |
| vdz-playlistdetails-tab | allows modification of playlist detail tab after viewing a mashup in a playlist |
Diagnostics
- At times you might want to use
!important if the changes are not being reflected.
- Another reason that changes might not be affected is if the UI element has multiple or Nested CSS classes on it. You can check the CSS class of a certain element by checking from your browser's developer tools.