Video Gallery

Objective

This recipe takes advantage of the Remote Video media type to create a video gallery that is created with a view block.

left side is a video player with title and description, right side is a scrollable list of videos represented with small screenshots and title

Left:
Includes embedded video with title and description

Right:
A scrollable list of videos each represented by still image and title, both clickable.

Function: when you click a video in the right-hand scrollable list it then populates the player on the left (demo site)

Status
Active
Drupal Version
8.9.7
Recipe Tags
remote video, YouTube, Vimeo
Notes
Modules Needed
Description

Necessary Modules:
Views Slideshow
Views Slideshow Cycle
Views Slideshow Render Entity Pager (might not need)

Modules that may be needed (still researching):
Video Embed Field
Video Embed  Media

Steps to Build

Requirements

Core modules that you will need to enable for development:

  • Field UI (you will be adding fields)
  • Media
  • Media Library
  • Responsive Images
  • Views UI (make sure you have Views enabled)

Contributor module you will need to install and enable:

jQuery libraries that are needed ( see Installation and Requirements for details):

Development Steps

  1. Add a special display
    Admin → Structure → Display Modes → View Modes
    Under Media, create a new "Teaser" mode
  2. Add fields to the Remote Video media type
    Admin → Structure → Media Types → Remote Video (Edit) -> Manage Fields → Add a field titled Video Description
    Details:
    Field Type: Text (formatted, long)
    Label: Video Description (field_video_desciption) → Save and continue Limited: 1 (default) → Save field settings
    Check Required field → Save settings
  3. Update the Managed From Display (Default)
    1. Name (move up from disabled to the top)
    2. Video URL
    3. Video Description (new field)
    4. ... all the other admin fields...
  4. Manage Display
    1. Custom Display Setting → activate Full Content and Teaser
    2. Default display: disable all fields EXCEPT the Video URL
    3. Full Content display:
      1. Video URL
        (make sure you set the Max Width/Max Height in a 9:6 ratio, suggest 578 x 324)
      2. Name
      3. Video Description
    4. Teaser display:
      1. Thumbnail - Format: Responsive Image, wide
      2. Name (make sure it is NOT linking to anything)
  5. Add your content
    Admin -> Content -> Media -> Add Media -> Remote Video
  6. Create the new Videos view:
    Admin → Structure → Views → + Add view
    1. View name: Videos
    2. Show Media of type Remote Video sorted by Newest First
    3. Create a block
    4. Block title: Videos Gallery
      Display Format: Slideshow of Media
    5. Items per block: 5
  7. Edit the new Videos view
    Videos view Gallery block details
    Videos view Gallery block details
    • Slideshow
      Action → View Action Advanced Options → Start Slideshow Paused Bottom Widgets → Pager → Fields → check both Thumbnail & Name all the rest leave the default settings
       
    • The rest:
      • Show: Media | Full content
      • Thumbnail field: formatted as Image and image style as None (original image) and does NOT link to anything
      • Name field can be left as Plain text and will NOT link to the media

Still have a couple more steps to add. - Karen (April 21, 2021)

 

Participants
K L Dickenson