YouTube Video Gallery

Add a video gallery to your site with just a few clicks! Our YouTube Video Gallery allows you to display all of your YouTube videos conveniently in one thumbnail gallery. Customization options offer control of thumbnail arrangement, video playback positioning, gallery styling and more.

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

TUTORIAL VIDEO

SETUP

This widget should be used with a valid YouTube user account or channel. You may create a YouTube channel at youtube.com, or utilize an existing channel. Please obtain permission if posting videos from an account that is not your own.

Tip: While making changes to the settings in the widget options, the gallery will update within the editor. While the gallery re-renders, the widget option panel may disappear briefly. Please be patient as you progress through the options, allowing the gallery to update as needed.

WIDGET PLACEMENT

  • Drop the YouTube 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.
  • Channel URL / User URL: Paste the URL of your YouTube channel here. Whether you have a channel or user URL type depends on the age of your YouTube account, as well as other factors. Both options are valid in our widget. Acquire this URL in the main top-level page of your public-facing YouTube account.
  • Video Source: This dropdown allows you to select what video types are displayed in your gallery by default: Uploads displays all video uploads. All Playlists shows all playlists. Featured Playlist shows a specified featured playlist. Selecting this option will display a new field in the option panel: Featured Playlist URL.
  • Featured Playlist URL: As mentioned above, this option is only seen when Featured Playlist is selected from the Video Source dropdown. Acquire this URL by copying the URL when on the page of your featured playlist.
  • Video Playback Location: This dropdown allows you to choose how your video will play. Lightbox plays the video on the same page, in a lightbox. External Link exits your site and plays the video on it’s actual YouTube page. Within Widget Container plays the video within the video gallery area on your site. When this option is chosen, the video is displayed on top of the gallery. Note that when this option is selected, a new toggle option appears near the bottom of this section: Autoplay Video. This toggle option does as it says: it plays the video as soon as a thumbnail is clicked, and does not require the site visitor to click play on the video.

GALLERY SETTINGS

  • Columns: This setting sets the number of columns displayed in your gallery. A higher number results in smaller thumbnails and vice versa.
  • Maximum Number of Results: This allows you to set the maximum number of gallery thumbnails shown by default. For example, if 3 columns are used, a setting of 9 in the Maximum Number of Results dropdown will result in 3 columns of video thumbnails arranged in rows of 3.
  • Load More Button Text: The text that is seen on the Load More button.
  • Loading Status Text: The text seen as the gallery loads more videos. This text is shown in a very brief amount of time.
  • All Done Status Text: The text seen when the gallery has finished loading videos. This text is shown in a very brief amount of time.
  • Autoplay Video: This toggle allows video to play automatically when a thumbnail is clicked. Note that this option is only available when the “Within Widget Container” setting is used in the Video Playback Location dropdown.
  • Hide Uploads / Playlist / Featured Tab: These toggles allow you to hide the named tabs in the gallery header.

WIDGET OPTIONS (DESIGN)

Extensive styling options are available for the gallery, header, text, and thumbnail descriptions. Individual settings in this area will not be explained individually here as each setting does as it is labeled.