Video Galleria gadget

Note:

Your organization must be subscribed to Igloo's Gadget Depot to use gadgets in your digital workplace. Contact your Customer Success Manager or email the Customer Success Team to subscribe to the Gadget Depot and get access to all available gadgets.

Use the Video Galleria gadget to allow users to interact with multiple MP4 videos at once from one or more folder channels in a configurable carousel of video thumbnails. Videos in the gadget support custom poster images, subtitles, and chapters. 

The gadget with a horizontal carousel and displaying the active PDF.

Sections in this article:

Considerations and caveats

  • Firefox compatibility: The picture-in-picture feature does not work in Firefox. It works in all other browsers.
  • Mobile compatibility: Tapping thumbnails doesn't open the video file on mobile view. Instead, drag the screen to swap between thumbnails. 
  • Video resolution: The gadget's video player displays videos in their own resolution. A 1080p video will be displayed in 1080p, while a 720p video will be displayed in 720p. 
  • Autoplay: If autoplay is running, you can interact with other buttons in the gadget or select other MP4 thumbnails. However, selecting the currently active MP4 thumbnail will pause the autoplay functionality. The Autoplay feature is only available in the small column view or if the video player is hidden.
  • Video size and layout: The gadget supports landscape and portrait video files. For the best visual appearance, if videos are oriented in landscape, we recommend setting the toolbar to display either Top or Bottom and the carousel Horizontally (Top or Bottom). If videos are portrait-oriented, we recommend displaying the toolbar at the Top and the carousel Vertically (Left or Right). If there is a mix of video orientations, they typically appear better if prioritizing the landscape view. 
  • Color scheme and styling priority: There are multiple ways to affect the gadget's color scheme and overall style. In order of their priority in being applied:
    1. Custom CSS style sheet
    2. Custom colors
    3. Light/Dark mode
    4. Site styling
    5. Default color scheme
  • Error images: A video poster frame may have an error if the digital workplace is still processing the custom PNG file or the MP4 video. There is a configuration option to provide an absolute link to an image to be used in the event of an error loading a video poster frame. The error image must be a PNG file type and end with png. The error image must reside in the same digital workplace as the gadget or be hosted in a service such as Azure.

Language support

  • The platform does not support language for files. File names and descriptions will appear as they are uploaded to the digital workplace.
  • Error messages will appear in English.
  • Video Player tooltips support all platform languages except for the following (tooltips will default to English for unsupported languages):
    • Haitian Creole
    • Lithuanian
    • Spanish: Latin America 
  • Toolbar and carousel tooltips and button texts support all platform languages except for the term Autoplay.
  • If VTT chapters files are provided in the user's selected language, that file will be used. Otherwise, English VTT chapter files are used.
  • There is no limit to the number of subtitle files per video.

Set up

Follow these steps to set up this gadget:

  1. Place an  Integrations widget on a page, space, or dashboard. For more information, see Placing and setting up a widget. Here are some tips to consider when placing this gadget:
    • The gadget can be placed in any column if the video player is hidden.
    • If the video player is displayed, set the carousel position to Horizontal (Top or Bottom) and place the gadget in a large column to make it as large as possible.
    • If the video player is displayed and the carousel position is set to Vertical, the gadget will look best in a medium to large column.
    • If the gadget is viewed in a small column or on mobile, the layout will condense to appear better in the smaller view and still have a functional video player. The video player will appear on most mobile sizes.
    • If the gadget is viewed in a tiny column or mobile view (lower than or equal to 260 pixels wide), it will take on a default layout optimized for the smallest viewport with the video player hidden. In this view, the Autoplay button is not hidden, and the Fullscreen button is added to the toolbar, which can be used to view the video file outside the view player.
  2. Select the placed widget's Edit button.
  3. Under Integration Library, select  Igloo Gadget Depot.
  4. Select the Igloo_VideoGalleriaGadget_IconMedium.pngVideo Galleria gadget from the library.
  5. Review and make changes to the settings on the Options and Appearance tabs. You can find details about the widget's settings in the Settings section below.
  6. In the widget editor, select Update to apply your changes or Cancel to discard them.
  7. At the bottom of your page, space, or dashboard, select Publish or Save as Draft to save your changes. 

Settings

Options tab

Setting Description
Title

Enter a title for the widget. The title appears as a heading above the widget's contents. You should use the title to provide context to the widget and better structure a page's content by clearly denoting different sections.

When entering a title, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select  Translation and enter a title for each supported language.

 
This field can contain a maximum of 140 characters.
Title link Enter the URL of a location in your digital workplace. Users who select the widget's title, if it has one, will go to this location. Whether you enter the link as a relative URL or an absolute URL does not matter; it will convert to an absolute URL the next time you edit the widget.

This field can contain a maximum of 2,083 characters.
Description

Enter a description for the widget. The description appears between the title and the widget's contents. You can use this text to provide users with information about the widget.

When entering a description, only do so for the language you have currently select. If your digital workplace supports multiple languages, you should select  Translation and enter a description for each supported language.
General Options
Setting Description
Folder channel paths Enter a comma-separated list of URLs to identify the folder channels or folders from which the gadget will display MP4s. This should be the whole path after the site's domain. For example, for a folder located at example.igloodigitalworkplace.com/files/mp4_files, the path would be /files/mp4_files.

To display MP4s from multiple folder channels, list the paths separated by commas. For example: /files/spring_videos, /blogs/fall_videos.

We recommend using a maximum of 4 folder channel paths to maintain optimal performance and better control over what is displayed.
Number of items to display Select the maximum number of MP4s to display. Options include:
  • 5
  • (Default) 10
  • 15
  • 20
This limit is applied after items are sorted. As a result, the Sort Order can result in different MP4s being displayed.
Include archived items

Select to display archived files (MP4s, PNGs, VTTs).

This setting is not selected by default.
Sort order Select the order in which MP4s are displayed. Options include:
  • Alphabetical (A to Z): The title of the MP4. (Default)
  • Created (newest to oldest): The date the MP4 was created.
  • Published (newest to oldest): The date the MP4 was published.
  • Modified (newest to oldest): The date the MP4 was last modified.
Reverse sort order Select to reverse the sort order.  
  • If the Sort order is Alphabetical, MP4s are ordered from Z to A based on their titles.
  • If the Sort order is Created, Published, or Modified, MP4s are ordered from oldest to newest.

This setting is not selected by default.
Document label order Enter a comma-separated list of labels to identify a custom order for the MP4s. MP4s are grouped according to their labels, which are used to arrange the order. Within the groups, the MP4s are sorted according to the selected Sort order.

Ordering by labels is applied after MP4s have been sorted using the selected Sort Order and reduced in quantity by the selected Number of items to display.

Keep in mind the following when using this functionality:
  • Labels are case-sensitive.
  • The performance will degrade as more MP4s are displayed in the gadget.
  • If an MP4 matches on multiple labels, the label that would appear first if labels were sorted alphabetically is the one used.
  • MP4s with no labels are grouped after MP4s with labels.
This field is blank by default.
Content Options
Setting Description
Hide the video player

Select to hide the interactive video player. If selected, the Carousel Layout will be set to Horizontal, the Toolbar Layout will be set to Top, and the Autoplay and Fullscreen buttons will be displayed unless hidden.

This setting is not selected by default.
Fallback error image - thumbnails Enter the absolute URL of an image to display when a video thumbnail does not exist. This can occur when:
  • A thumbnail was not generated for a video file.
  • The digital workplace is still processing a video.
Keep in mind the following: 
  • The image must be a PNG.
  • The last three characters of the file name must be png.
  • The source of the image must use HTTPS.
  • The image must reside in the same digital workplace using the gadget or be hosted in a service such as Azure.
  • If hosting the image in your digital workplace, it must be located in a folder channel named files that is located at the root of your digital workplace. The image can be located anywhere within this folder channel. For example: 
    https://customercare.igloosoftware.com/files/images/thumbnailerrorpng

By default, this will display an image that says "Thumbnail Not Available".
Choose whether the links open in the same or new tab Select how users experience links that redirect to another location. Options include:
  • (Default) Links open in the same tab
  • Links open in a new tab
Choose what happens when you click on thumbnails Select what happens when users select a thumbnail. Options include:
  • (Default) Select that item in the carousel
  • Opens the file in the external video player.
Choose the carousel layout Select how the gadget displays thumbnails. Options include:
  • Horizontal (Top): Thumbnails are displayed from left to right and appear above the video player. (Default)
  • Horizontal (Bottom): Thumbnails are displayed from left to right and appear below the video player.
  • Vertical (Right): Thumbnails are displayed from top to bottom to the right of the video player.
  • Vertical (Left): Thumbnails are displayed from top to bottom to the left of the video player.
If Hide the video player is selected, the layout will default to Horizontal (Top).
Choose the toolbar position Select how the gadget displays the toolbar. Options include:
  • (Default) Top: The toolbar will be displayed above the video player.
  • Bottom: The toolbar will be displayed below the video player.
If Hide the video player is selected, the layout will default to Top.
Choose the toolbar transition interval

When the Carousel Layout is set to Vertical, the toolbar will be displayed when the video player is paused and hidden when it is playing. If the video is paused, it will reappear at a configurable interval (seconds).

Options include:

  • 1 second
  • 2 seconds
  • (Default) 3 seconds
  • 4 seconds
  • 5 seconds
Choose the carousel transition interval

Select how much time is spent on each thumbnail when autoplay is enabled.

Options include:

  • 3 seconds
  • 4 seconds
  • (Default) 5 seconds
  • 6 seconds
  • 7 seconds
Hide the autoplay button

Select to hide the /  Autoplay button. Users can interact with this button to start/pause the automatic cycling of thumbnails in the carousel.

This setting will be enabled by default if the video player is displayed in the gadget.

This setting is not selected by default.
Hide the Copy URL button

Select to hide the  Copy URL button. Use this button to copy the page's deep-linked URL containing the ID of the currently selected video and an optional timestamp. If this button is hidden, users can access the same menu by right-clicking the video player.

When clicked, options include:

  • Copy Video URL 
  • Copy Video URL at current time

This setting is not selected by default.
Hide the video location button

Select to hide the Go to selected file location button. Users can interact with this button to go to the active MP4's location in the digital workplace.

Whether the MP4 is opened in the same tab or a new tab is determined by the setting Choose whether the links open in the same or new tab.

This setting is not selected by default.
Hide the fullscreen button

Select to hide the Fullscreen button. This button only appears if the video player is not being displayed. Users can interact with this button to open the active MP4 in the browser's video player without the Video Galleria video player. Whether the MP4 is opened in the same tab or a new tab is determined by the setting Choose whether the links open in the same or new tab.

This is separate from the Fullscreen button in the video player's toolbar, which will open up the MP4 in the video player's fullscreen mode and can be accessed by double-clicking the video player.

This setting is unselected by default.
Hide the like button and likes count

Select to hide the Like button and the number of likes. Users can interact with this button to add a like to an item. This button displays the current number of likes on an item.

This setting is unselected by default.
Hide the video title from the toolbar

Select to hide the active MP4's title on the gadget's toolbar.

This setting is not selected by default.
Hide the video description from the toolbar

Select to hide the active MP4's description on the gadget's toolbar.

This setting is not selected by default.
Hide the video count from the toolbar

Select to hide the index of the currently active MP4 file and total file count from appearing on the gadget's toolbar.

This setting is not selected by default.
Hide the video title from the carousel

Select to hide the titles of MP4 files in the carousel.

This setting is not selected by default.
Hide the playback rate button

Select to hide the Playback Rate button from the video player's toolbar. Users can interact with this button to change the speed of the active MP4. Options include:

  • 0.5x
  • (Default) 1x 
  • 1.5x
  • 2x

This setting is not selected by default.
Hide the captions button

Select to hide the Captions button from the video player's toolbar.

If no subtitle files are found in the source location, this button will be hidden by default. If this setting is enabled, the gadget will not search for subtitles or chapter files in the source location.

This setting is not selected by default.
Hide the picture-in-picture button

Select to hide the Picture-in-picture button from the video player's toolbar. Users can interact with this button to pop out the video player in a smaller, draggable view.

This setting is not selected by default.

This feature does not work and will not display in Firefox browsers.
Disable video audio

Select to mute all videos in the video player. Videos will play without audio. If selected, the volume toggle button will also be hidden.

This setting is not selected by default.
Display Options
Setting Description
Check to load styles from the main Igloo stylesheet

Select to style the gadget according to the theme of your digital workplace.

This setting is selected by default.
Choose the color scheme

Select a color scheme. Options include:

  • (Default) Light Mode
  • Dark Mode

If Check to load styles from the main Igloo style sheet is selected, this setting will use the color theme of your digital workplace when determining the colors of the gadget. If it is not selected, the color scheme will use black (#000000) and white (#FFFFFF) as the default colors.
Custom CSS file

If you are using a custom CSS file to style this gadget, enter the absolute URL of where the style sheet is located. Keep in mind the following:

  • The style sheet will take precedence over styles in your digital workplace's theme.
  • The style sheet must reside in the same digital workplace using the gadget or be hosted in a service such as Azure.
  • If you are hosting the style sheet in your digital workplace, it must be located in a folder channel named files that is located at the root of your digital workplace. The style sheet can be located anywhere within this folder channel. For example: https://customercare.igloosoftware.com/files/css/stylesheetcss
  • Valid files must end with css.
Play button background color

Enter the color used for the background of the large Play button in the center of the video player.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #FFFFFF if Choose the color scheme is set to Light Mode.
  • #000000 if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
Play button icon color

Enter the color used for the play icon in the large Play button in the center of the video player.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #000000 if Choose the color scheme is set to Light Mode.
  • #FFFFFF if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
Toolbar background color

Enter the color used for the background of the toolbar.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #FFFFFF if Choose the color scheme is set to Light Mode.
  • #000000 if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
Toolbar text color

Enter the color used for the text of the toolbar.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #000000 if Choose the color scheme is set to Light Mode.
  • #FFFFFF if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
Toolbar button color

Enter the color used for the background of the toolbar buttons.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #000000 if Choose the color scheme is set to Light Mode.
  • #FFFFFF if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
Toolbar button on hover background color

Enter the color used for the background of toolbar buttons when they are hovered over.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • rgba(0,0,0,0.1) if Choose the color scheme is set to Light Mode.
  • rgba(255,255,255,0.1) if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
Carousel background color

Enter the color used for the background of the carousel.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #FFFFFF if Choose the color scheme is set to Light Mode.
  • #000000 if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
Carousel button and text color

Enter the color used for the following:

  • Background of carousel buttons
  • Carousel text
  • Text and icons when loading
  • Text and icons in errors

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • #000000 if Choose the color scheme is set to Light Mode.
  • #FFFFFF if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
Carousel button on hover background color

Enter the color used for the background color of carousel buttons when they are hovered over and the background color of the active MP4 in the carousel.

Use any of the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • RGBA value: rgba(153,255,51,0.6)

The default value is:

  • rgba(0,0,0,0.1)If Choose the color scheme is set to Light Mode.
  • rgba(255,255,255,0.1)if Choose the color scheme is set to Dark Mode.
  • The color indicated in your theme if Check to load styles from the main Igloo style sheet is selected.
Style Options

Appearance tab

Appearance options
Setting Description
Class

 Enter CSS class selectors to provide additional styling to the widget. For more information, see Applying custom CSS to widgets.
Height

 Select the height of the widget.

The default value is Auto (leftmost slider position)s, which scales the widget's height to fit its contents. You can use the slider to set a fixed height between 50px to 600px in increments of 50px.

Selecting a Height other than Auto will add a vertical scrollbar to the gadget.

Note

Your digital workplace's theme overwrites many of the settings on the Appearance tab. However, the settings listed above are usable.

 

Using it

Adding custom poster frames

To add a custom poster frame to a video, upload a PNG file in the same folder as the video. This PNG file must have the following properties:

  • The file must be a valid PNG file, and have .png at the end of the file name.
  • The PNG file's name must match the name of the associated video. For example, If the video title is Catching a wave.mp4, the poster frame must be named Catching a wave.mp4.png.

Adding subtitles

Subtitles allow for text to be displayed on a video. To add subtitles to a video, upload a VTT file for each language you want to support into the same folder as the video. This VTT file must have the following properties:

  • The file must be a valid VTT file, and have .vtt at the end of the file name. See below for an example file or refer to Mozilla's Web Video Text Tracks Format.
  • The VTT file's name must match the associated video's name and include a valid language code. For language codes, see Supported Languages. For example, If the video title is Catching a wave.mp4, the subtitles file must be named Catching a wave.mp4_en.vtt.

Here is an example of the contents of a subtitles file:

WEBVTT

1
00:00:00.000 --> 00:00:05.000
This is the first subtitle.

2
00:00:05.000 --> 00:00:10.000
This is the second subtitle.

3
00:00:10.000 --> 00:00:15.000
This is the third subtitle.

When adding subtitles, keep in mind the following:

  • If Hide the captions button is enabled, users won't be able to enable subtitles on a video regardless of whether it has the required files.

Adding chapters

Chapters allow users to go to a specific point in a video. To add chapters to a video, upload a VTT file for each language you want to support into the same folder as the video. This VTT file must have the following properties:

  • The file must be a valid VTT file, with .vtt at the end of the file name. See below for an example file or refer to Mozilla's Web Video Text Tracks Format.
  • The VTT file's name must match the associated video's name, include a valid language code, and indicate that it is for chapters. For language codes, see Supported Languages. For example, If the video title is Catching a wave.mp4, the chapters file must be named Catching a wave.mp4_en_chapters.vtt.

Here is an example of the contents of a chapters file:

WEBVTT

1
00:00:00.000 --> 00:00:10.000
1.Chapter one

2
00:00:10.000 --> 00:00:20.000
2.Chapter two

3
00:00:20.000 --> 00:00:30.000
3.Chapter three

When adding chapters, keep in mind the following:

  • If Hide the captions button is enabled, users won't be able to select chapters on a video regardless of whether it has the required files.
  • If chapters are provided in the user's selected language, that file will be used. Otherwise, English chapters are used.

Linking to a specific video and time

To create a link to a specific video or time in a video:

  1. Select the video from the carousel to open it in the video player.
  2. (Optional) Select Play and pause the video when you want to link to it.
  3. Right-click the video in the player and select either Copy video URL or Copy video URL at current time.

Users who go to the provided link will see the linked video in the video player. When they select Play, it will start playing from the copied time.

The copied URL uses a video id and time parameter that can be modified after copying:

yourworkplaceurl.ca/gadgetlocation?video=2fb622dd-fc16-44e4-954b-638c987b7697&time=0

Layout

Large view with video player:

The components of the Video Galleria in Large View with video player.

Small view without video player:

The components of the Video Galleria in Small View without video player

Hotkeys

The video player allows for hotkey navigation when the video player is focused:

  • Space or k: Play/Pause the video.
  • M: Mute/Unmute the video.
  • F: Enter/Exit fullscreen.

Troubleshooting

The gadget will be unable to display any information if any of the following conditions are met:

  • No valid folder channel or folder paths are provided in the gadget configuration.
  • A valid folder channel or folder path was provided, but there are no MP4 files in the folder channel or folder.