Video gallery widget

You use the Video gallery widget to display a list of videos and each video can be played from the list. You choose videos from the ones already uploaded in your libraries.

PREREQUISITES: You uploaded at least one video. For more information, see Upload videos.

After you place the Video gallery widget on your page you configure it to display videos.

To do this, click the Edit button in the upper-right corner of the widget. In the Video gallery window, you can choose whether to select a video from the ones already uploaded or to upload another video.

Select videos to display

In the Content tab page, choose which videos you want to display. Choose between the following options:

  • From all libraries
    All videos that are uploaded and published will be displayed in the list.

  • From selected libraries only...
    A custom selection of libraries is displayed. To select one or more libraries from which you want to display videos, click the Select button.

  • From currently opened library
    All published videos from the currently opened library will be displayed in the list.

Under Narrow the selection you can further specify which videos or files to display by choosing one of the following:

  • All published videos
    This option is selected by default and displays all videos selected in the previous step.

  • Selection of videos...
    You can narrow down the displayed videos using categories, tags, and dates. Select one or more of the following:

    • Categories...
      Select categories from which to display videos.

    • Tags...
      Select the tags by which to narrow down videos that are displayed.

    • Date...
      Select one of the predefined time intervals or choose Custom range… to select a more specific time interval, in which the videos you displayed are created.

    NOTE: You can select more than one filter and narrow down results using combinations of filters, for example, by both categories and dates.

List settings

List settings define how videos are listed by the Video gallery widget. Choose one of the following options:

  • Use paging
    Sitefinity CMS divides the videos into pages. In the input field, specify how many videos per page to display.

  • Use limit
    Sitefinity CMS displays only a limited number of videos. In the input field, specify how many videos to display.

  • No limit and paging
    Sitefinity CMS displays all videos that meet the requirements and filters you set in the Content tab.

  • Thumbnail size
    Provides option for configuring size of video thumbnails. This size applies to the thumbnails of the videos when widget is in List view mode.

  • Sort videos
    By default, last published videos are listed on top. You can select a different sorting criterion:

    • Last published
    • Last modified
    • By Title (A-Z)
    • By Title (Z-A)
    • As set in Advanced mode
      To sort the list of videos by property that is not defined in the sort dropdown menu, you must add a new sorting expression in the designer’s Advanced mode. For example, to sort videos using the Extension property of video, navigate to Advanced » Model and, for SortExpression, add Extension ASC. As a result, in the sort dropdown menu, the As set in Advanced mode option is selected by default.
  • List template
    Select the template you want to use to list videos on the webpage. Select one of the following:

    • VideoGallery
      On the webpage, the videos are displayed in a list with their names and thumbnail representing its video content. Clicking the video thumbnail will open the video's detail view. In the detail page you can play the video.
    • OverlayGallery
      The videos are displayed in list, containing video thumbnail and its title. Clicking the video will open the HTML video player in overlay popup.
  • CSS classes
    Expand More options section to specify CSS file names and apply additional CSS classes to the Video gallery widget when in list mode.

Single item settings

Single item settings define how individual videos are displayed. Choose one of the following options:

  • Open single item in...
    Select one of the following options:

    • Auto-generated page
      When you click a video, it is displayed in an automatically generated page with the same layout as the list page.

    • Selected existing page...
      Select a page from the list of existing pages that has the desired layout. When you click on the video, it is displayed in this specific page.

    NOTE: The page on which you want the video displayed, must have a Video gallery widget added.

  • Aspect ratio
    Provides option for configuring size of videos. This size applies to the video player displayed when widget is in Detail view mode. When selecting option different from Auto you can configure more precisely the Width and Height of the video in pixels. You can select from different sizing options:

    • Auto
    • 4X3
    • 16X9
    • Custom
  • Detail template
    Select the template you want to use to display video's details on the webpage.

  • CSS classes
    Expand More options section to specify CSS file names and apply additional CSS classes to the Video gallery widget when the video details are opened.

Advanced settings

In Advanced settings, you specify individual properties of the widget:

  • DetailsPageId
    Gets the ID of the page you selected in the Selected existing page... option in the Single item settings tab page.

  • DetailTemplateName
    Gets the template you selected in the Detail template dropdown menu in the Single item settings tab page.

  • ListTemplateName
    Gets the template you chose in the List template dropdown menu in the List settings tab page.

  • OpenInSamePage
    Defines whether when you click on a video thumbnail to open the detail view in a new window. The default value is False.

Model settings

Model settings display all properties directly bound to the Video Gallery widget model. Access these properties by clicking the Model button in Advanced settings.

  • DetailCssClass
    Gets and sets an additional CSS class to the detail view of a video.

  • DisplayMode
    Gets the value you selected in the Simple List settings tab page:

    • Paging
      This is the default option.
    • Limit
    • All
  • FilterExpression
    Filters videos based on an additional filter expression.

  • ItemsPerPage
    Defines the number of videos per page when paging is enabled. The default value is 20.

  • ListCssClass
    Gets and sets an additional CSS class to the list view.

  • ParentFilterMode
    Gets the option that you chose for libraries in the Content tab page. The possible values you can choose from are:

    • All
      This is the default option.
    • Selected
    • CurrentlyOpen
  • ProviderName
    If you have more than one providers added, you can use a video provider different than the default one. To do this, specify the name of this provider.

    NOTE: If you leave this property value empty, the default video provider is used.

  • SelectionMode
    Gets the option that you chose for videos under Narrow selection by... in the Content tab page. The possible values you can chose from are:

    • AllItems
      This is the default option.
    • FilteredItems
  • SerializedAdditionalFilters
    In case videos are filtered based on a date, tags, or categories, the IDs of the selected filter criterions are serialized and populated in that field.

  • SerializedSelectedItemsIds
    In case videos are specifically selected, the IDs of the selected videos are serialized and populated in that field. For example: ["3f47d0b8-2d22-6e58-888c-ff0000bfc4e0"]

  • SerializedSelectedParentsIds
    In case video libraries are specifically selected, the IDs of the selected libraries are serialized and populated in that field. For example: ["3f47d0b8-2d22-6e58-888c-ff0000bfc4e0"]

  • SerializedThumbnailSizeModel
    Contains serialized settigns for size of the thumbnails. Specified size is used in the frontend of the Video Gallery widget when displayed in list mode.

  • SerializedVideoSizeViewModel
    Contains serialized settigns for size of the videos. Specified size is used in the frontend of the Video Gallery widget when displayed in details mode.

  • SortExpression
    Adds additional sorting expression for the videos. The default value is PublicationDate DESC.

  • UrlKeyPrefix
    Gets or sets the URL key prefix. Used when building or evaluating URLs for paging and filtering.

Additional resources

ARTICLES

Sitefinity: Video gallery widget

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?