Vimeo Video Gallery

Vimeo Video Gallery widget from Without Code

Display all of your Vimeo videos in one place using our Vimeo Video Gallery. This widget uses a simple and streamlined layout, allowing your video thumbnails to maintain the gallery focus. Video playback takes place in a lightbox, and offers sharing, likes, fullscreen mode, and many other features.

Demo: https://demo.wocode.com/vimeo-video-gallery

Tutorial Video

SETUP

This widget is used with a Vimeo user account. You may create a Vimeo account at vimeo.com. Please obtain permission if posting videos from an account that is not your own.

WIDGET PLACEMENT

  • Drop the Vimeo Video Gallery widget on your site.
  • Place the widget where you would like your video gallery to appear on your page.
  • Resize the widget container as needed.
  • For a full width gallery, enable “Full Bleed Row” in the parent row’s settings.

WIDGET OPTIONS (CONTENT)

  • Open the widget option panel.
  • Unique ID: This field should be updated when multiple galleries are used on the same page. One trick we like to use is to enter a new, non-default Unique ID in the first widget, before adding the 2nd widget. This way, neither widget is ever sharing the same Unique ID.
  • Vimeo User: Enter your Vimeo account name
  • Number of Videos: This is the number of thumbnails that will display the gallery.
  • Thumbnail Width: This is the width at which your thumbnail images will be displayed. The width and height settings are manual, meaning you can control the exact width and height, regardless of the original aspect ratio of the thumbnail. This offers total control, however, be careful that you use width and height ratios appropriate for your thumbnails, otherwise image distortion may occur.
  • Thumbnail Height: This is the height at which your thumbnail images will be displayed. The width and height settings are manual, meaning you can control the exact width and height, regardless of the original aspect ratio of the thumbnail. This offers total control, however, be careful that you use width and height ratios appropriate for your thumbnails, otherwise image distortion may occur.
  • Padding Between Thumbnails: The padding determines the space between thumbnail images.

WIDGET OPTIONS (DESIGN)

In the Design section, you will find Thumbnail Settings, and Spacing. The spacing settings are standard spacing settings you find in all widgets. The Thumbnail Settings area provides style options related to the overlay that is seen when hovering over thumbnail images. You will see these settings update in real time as you change settings and hover over thumbnail images in the editor. Individual settings in this area will not be explained individually here as each setting does as it is labeled.