Video Carousel

The Folwell Video Carousel component allows users to insert multiple videos onto a page in a navigable carousel.

1. From Layout Builder, select + Add Block 

   

2. In the right-sidebar menu, select + Create content block

   

3. Select Video Carousel Component

   

4. The Configure block window will appear for the Video Carousel component. Add a Title to the block. You may optionally display or hide the title you've added to the block.

   

5. Next, select a Carousel Theme (see the examples of each theme at the top of this page) and add an optional title to the Video Carousel.

   

6. A Carousel Link can be added to connect the Video Carousel to associated content such as a news story. Type the name of the piece of content you'd like to connect the carousel to, or optionally add the URL of an external link.

   

7. Under Carousel Videos, you can add a video file in .mp4 format, or add a video URL from YouTube or Vimeo. You may also include a custom thumbnail by clicking Add media under the Video Thumbnail section. Videos provided by YouTube or Vimeo have their thumbnails auto-generated. 
   Select Add media under the Video Entity section.

   

8. Select the Video file link, then select the Select files button. You can add a video file directly from your device provided that it is in .mp4 format.

   

9. Alternatively, you may add an already uploaded file from the filter in the same window. Search for the file name in the Name input box, select the Apply filters button, then select the video file that appears in the grid below the filter. Select the Insert selected button to add your video to the carousel.
   (Note: these steps can be followed to add a custom thumbnail to the video from the Add media button under the Video thumbnail section)

   

10. Alternatively, a YouTube or Vimeo URL can be added to the Video Carousel component. Select the Video link, then add a Youtube or Vimeo video URL to the Add Video via URL input box. After that, select the Add button.

    

11. The window will now display the video provided from Vimeo or YouTube auto-generating its thumbnail and auto-populating the Name field with the title of the video as it appears on its respective site. The Name field can be edited or left as the default. Select Save and insert to add the video to the carousel.

    
12. Repeat the previous steps to add additional videos to the Video Carousel component, then select the Add block button.
13. Select the Save Layout button to view your changes.

• Only utilize Video Carousel component if multiple videos must be displayed
• Ensure videos are WCAG 2.1 compliant (e.g. captions available)
• YouTube and Vimeo videos are preferred over video files
• Ensure carousel and video titles are meaningful and relevant to their surrounding content
  • Use the appropriate Carousel Theme for the content on display

• Ensure videos are WCAG 2.1 compliant (e.g. captions, translation options available)
• Captions should be accurate to what is being displayed and expressed on screen.
  • These options can be accessed via YouTube and Vimeo
• Thumnail images must always have an "alt" tag. See the Accessible U website to learn more about the importance of "alt" tags and how to use them.
• Use keywords in the alt-text descriptions that label photos. Meaningful alt-text helps not only with accessibility, but also SEO.