Video gallery widget | WebForms

Use this widget to display a gallery of video thumbnails, where each video can be played individually.The widget uses Telerik RadMedia Played, which is an HTML5 video player. It supports WebM (.webm), Ogg (.ogv), and MP4 (.mp4) file formats.

PREREQUISITE: Your video library must support HTML5 mode. For more information, see Libraries upload mode.

You can choose videos from the already uploaded or upload new videos.

After you have dragged the Video gallery widget on your page you must configure it to display videos.

To do this, click Edit button in the upper-right corner of the widget.
The Video Gallery window appears, containing two tabs.

On Videos tab you select which videos to display in the gallery.

NOTE: If you are using multiple site management and the Libraries module uses data sources from more than one site, you must first choose the source from which you want to display videos.
For more information, see Multisite: Manage multiple sites.

1. Select one of the following: 
   • All published videos
     All videos that are uploaded and published are displayed in the gallery.
   • From selected library…
     The Video gallery displays videos only from a certain library.
     1. To select a library, click Choose.
        The Choose Library window appears
     2. Select the library, whose videos you want to display, and click Done selecting.

        For more information, see Videos.

   • Upload new videos…
     To upload new videos, click Upload and perform procedure Upload videos » Step 5 to Step 10.
2. Under Narrow the selection you can further specify which videos to display by choosing one of the following:
   • All published videos from selected library
     This is selected by default and displays all videos selected in the previous step.
   • Selection of videos
     You can narrow the displayed videos, using categories, tags, and dates.
     Select one or more of the following:
     • by Categories…
       Click the Select button to select the categories from which you want to display videos and click Done.
     • by Tags…
       Click Select button to select the tags, so that videos tagged with those particular tags will be displayed and click Done.
     • by Dates…
       Click Select button.
       Select one of the predefined time intervals, so that videos created during that interval will be displayed or choose Custom range… and use the From and To input fields to select a time interval. When finished click Done.
3. In Sort videos, select a sorting criterion for the videos in the gallery.

1. In Select video gallery type area, select one of the following:
   • Thumbnails + Detailed page
     The video gallery displays the videos as thumbnails. The description of the video is displayed in tooltip text. When clicked, the video is displayed in its original size in the same page together with video title, the user that has uploaded the video, the date of upload, and the description.
   • Thumbnails + Overlay (lightbox)
     The video gallery displays the videos as thumbnails. The description of the videos is displayed in tooltip text. When clicked, the video is displayed in its original size as an overlay of the page together with its description.
2. In Fine tune the selected type, perform the following:
   • If you select Use paging radio button, the system divides the thumbnail list of videos into pages.
     In the input field you specify how many video thumbnails per page you want to display.
   • If you select Use limit radio button, the system displays only a limited number of the video thumbnails.
     In the input field, you specify how many video thumbnails you want to display.
   • If you select No limit and paging radio button, the system displays all the videos that you have selected in Videos tab.
3. Select the size of the thumbnails that the videos in the gallery will use. 
4. Perform one of the following:
   • If you have chosen Thumbnails + Detailed page, choose one or more of the following checkboxes:
     • Show options for embedding
     • Allow full size
   • If you have chosen Thumbnails + Overlay (lightbox) page, select if you want to allow displaying the full sized video. 
5. You can edit the way the widget displays the list of videos, by clicking Edit Thumbnail list template and the detailed display of a video by clicking Edit Detail page template. For more information, see Create and edit widget templates.

You can configure the settings of the Telerik RadMedia Player to specify how the media player behaves when you click on a video from the video gallery.

To change the default settings of the Telerik RadMedia Player:

1. Open the widget for editing and in the lower-right corner, click Advanced button.
2. Modify one or more of the following media player settings:
• AutoPlay
  To automatically play the video when you click the video in the gallery, set the value to true
• FullScreen
  To open the video in full screen when you click the video in the gallery, set the value to true
  NOTE: To automatically open and play the video in full screen once you click on the video in the gallery, set both AutoPlay and FullScreen properties to true
• StartTime
  Change the time (in seconds) at which the player starts playing the video. For example, enter 10 to start playing the video from the 10th second onward.
• StartVolume
  Change the volume (in percent) at which the media player initially plays the video. Enter a number between 1 and 100 percent.
3. Save your changes.

1. To filter or sort the videos, click Advanced button in the lower-right corner of the window.
   The advanced editing mode opens.
2. In MasterViewName input field, check which view the widget uses.
3. Click ControlDefinition » Views buttons.
4. Choose for which view, you want to apply filtering or sorting by selecting the view that the widget uses.
5. Filter or sort the videos in the following way:
   • To filter the videos, in FilterExpression input field, enter the desired filtering expression.
     You can use both default and custom fields. The field supports AND and OR Boolean operators.
     For example, enter Visible = true AND Status = Live
     For more information, see Filter expressions for content items.
   • To sort the videos, in SortExpression input field, enter the desired sorting expression.
     You can use both default and custom fields. The field supports operators ASC for ascending and DESC for descending.
     For example, enter PublicationDate DESC

NOTE: To see all custom and default fields, perform procedure Create custom fields » Step 1 and Step 2.

For more information about advanced configuration options, see Advanced configuration of widgets.

When you are finished, click Save.
The Video Gallery window closes and the Video gallery widget is configured to display the videos you have selected.

NOTE: If your site is multilingual and the page you are editing is synchronized with another translation, when you edit the widget, the Save to all translations button appears. If you click it, the current widget configuration will be saved to all translations, else, if you click Save, the widget configuration is saves only to the current translation, but the pages are still synchronized. If your pages are synchronized, you can have different widget configurations, but you cannot have different widgets.