What is Vertical Video?
Vertical video refers to video content captured or formatted in portrait orientation, where the height is greater than the width. This layout is ideal for mobile viewing, and vertical videos are popular across social media and mobile platforms.
Drupal has two components for adding vertical video content:
- Vertical Video – for a single vertical video or a set of two or three related vertical videos.
- Vertical Video Gallery – for three or more vertical videos in a horizontally scrollable row.
Screenshots and display options of both components are included below.
Purpose
Both Vertical Video and Vertical Video Gallery enable you to embed vertical videos on your Drupal Cloud site, delivering mobile-optimized content while maintaining proper formatting across tablets, laptops, and desktop devices.
Where and How to Use Vertical Video Components
Both vertical video components can be added anywhere you would typically embed video content. Vertical video is particularly effective for highlighting student experiences or sharing faculty perspectives, where individuals speak directly to the camera or capture their day-to-day experiences on their phones.
Vertical Video
- For featuring one vertical video with an optional description, or to feature a small set of up to three closely related videos.
- Accepts only YouTube-hosted videos that are set to public or unlisted.
Vertical Video Gallery
- For larger collections of vertical videos (three or more) organized around a shared theme or story. An overarching description can be added for the gallery, and each video may include its own title overlay. For example, Vertical Video gallery is recommended for Straight from the Source style videos, where students share their experiences in their own words—designed to feel like social media–style, first-person narratives.
- Accepts videos hosted on YouTube or Vimeo that are set to public or unlisted.
Vertical Video Display
The Vertical Video component offers two display styles:
- Vertical Video Single Video: Features a single video highlight and includes a title, description and YouTube channel handle alongside the embedded video. The video can be aligned to the left or right to best complement your page layout.
- Vertical Video Multiple Videos: Displays embedded videos in a three-column layout on laptop and desktop devices, automatically reformatting to a single column on mobile or smaller screens. This layout is ideal when embedding a small number of related videos. In the near future, this option will be limited to a maximum of three videos.
The appearance of the play button is controlled by YouTube and may vary based on the video’s settings.
Vertical Video Gallery Display
The Vertical Video Gallery displays videos in a horizontally scrollable row, similar to images in the Media Gallery component.
The component allows you to add an optional title and description above the videos. You can also add a title to each individual video, which will appear superimposed over that video.
Pitfalls to Avoid
- Horizontal videos should not be used in Vertical Video or Vertical Video Gallery components, which are designed exclusively for vertical (portrait) orientation.
- As with other videos on your website, avoid using poor-quality video or videos with poor audio. Videos captured on smartphones can sometimes have focus or sound issues and may appear unprofessional.
- Do not flood a page with videos. While there are times when displaying multiple videos on a single page makes sense, large quantities of videos on a single page can overwhelm users and create performance issues.
- Do not omit or ignore the description when using the Vertical Video - Single Video display.
- Avoid using the Vertical Video - Multiple Videos display if you only have one video to embed.
- Do not add a title to only one video in a Vertical Video Gallery; ensure that either all videos have titles or none do, to maintain a consistent appearance.
- Don’t stack multiple Vertical Video components just to fit more videos. If you have more than three videos, use the Vertical Video Gallery instead.