Video Thumbnail with Modal

The Video Thumbnail with Modal allows Site Builders to show a photo in a widget that links to a video, and then when a user selects the widget, a larger "zoom" (modal) of the video player pops up to show the embedded video.

About the Video Thumbnail with Modal Widget

 The Video Thumbnail with Modal widget features a title to accompany the photo and an optional description for the embedded video. Just like the Add Video widget, only YouTube and Vimeo videos can be used with this widget. The photo used for the widget can be a still from the video, or a related image. See Figures 1 and 2, below, for examples of the Video Thumbnail with Modal widget.

Figure 1: Video Thumbnail with Modal (when displayed on the page)
Screenshot of a landing page with several widgets, including a Video Thumbnail with Modal widget, featuring a still from the Open Berkeley video

Figure 2: Video Thumbnail with Modal (after opening the larger modal version)
Screenshot of Video Thumbnail with Zoom modal, with embedded Open Berkeley video

How to Add and Configure the Video Thumbnail with Modal Widget

To add a Video Thumbnail with Modal, select the "Customize this page" button at the bottom of the page, select the "plus" icon from one of the page regions, then select "Berkeley Components." In this section, there will be a widget called "Video Thumbnail with Modal"; select this widget, then select "Add." See Figure 3, below.

Figure 3: Select Video Thumbnail with Modal
Screenshot of widget modal screen, where you can select Berkeley Components, and then Video Thumbnail with Modal, and then Add

The following settings are available on the Video Thumbnail with Modal widget configuration screen:

  • Title: Add the main title text of the widget (required).
  • Photo: Upload a new photo or choose an existing photo from your library (required).
  • Image Credit: Add photo credit (optional).
  • Video Link: Add the YouTube or Vimeo URL.
  • Video Description: Add a video description (optional; this field uses the limited WYSIWYG editing toolbar). 

Select the "Save" button when you are finished. See Figure 4, below.

Figure 4: Configure Video Thumbnail with Modal
Screenshot of Video Thumbnail with Modal editing screen, with the available fields highlighted

Notes

  • This feature aligns with the Berkeley Brand guidelines.
  • Large (high resolution) images may cause performance issues and could possibly cause other site errors. If you are uploading your own photos to use for Photo Thumbnails, try to only upload photos that have a file size of 1MB or smaller.
  • Images used for thumbnails should be at least 768px wide by 512px high
  • Using stock photos (intended for Hero widgets) for thumbnails is not recommended
  • For photo/image best practices, see Image Shapes and Sizes.

Topics