Video

How to add a Video component

Step 1: Add and configure Video component

  1. Add a Video component (see Adding a component for instructions on how to add a component).
  2. Select the Section Heading tab to add an optional section that appears at the top of the Video component (see Adding a component heading for details about adding a section heading).
  3. Select the Add Call to Action Link button to add up to three (3) call to action links to the video component.
  4. Select the Block Settings tab.
  5. Select a size option for the Video item from the Size menu: Full Width, Large, Medium, or Small.
  6. Add an optional Page Anchor Link to allow for links to the Video component (see instructions under Linking to page content).

Step 2: Add content and save

  1. Select the Content tab and select the Add Video Embed button.
  2. Enter the video link in the Add Video via URL field. The Video component supports linked videos on YouTube and Vimeo. Be sure to use the share URL provided by the video platform. Confirm the video includes accurate captions for sound or dialogue. (See Multimedia Accessibility for information on captioning and pricing for captioning vendors.)
  3. Select Save and Insert Selected to embed the video.
  4. Choose Save to save the Video component.

What is a Video component?

A Video component is a content block that displays embedded YouTube and Vimeo videos.

Video components can be used to present video content outside of the main body of the page.

A Video component is composed of an optional Section Heading, with a heading, introduction, and call to action links, and the embedded video and video player controls.

Screenshot of Video component with callout numbers marking the section heading, introduction, call to action links, and YouTube video with captions.
A Video component is composed of an optional section heading, with a heading (1), introduction (2), and call to action links (3), followed by the embedded video and video player (4). Be sure to include captions (5) when posting videos on YouTube or Vimeo (see the example Video component on the Drupal Demo Site).

 


Learn more about the Video component

Examples

Demo Site

See an example of the Video component on the Academics landing page of the Department of Rocket Science demo site.

Support and feedback options for HarvardSites Drupal

Submit a ticket

If you encounter any issues or bugs with the HarvardSites Drupal platform, please submit a ticket through the HUIT Service Desk.

Share website feedback

If you have ideas for how to improve the HarvardSites User Guide website, please submit your ideas using our website feedback form.

Design System How-To Guides

Practical guides and how-tos for using HarvardSites features to build engaging, effective websites that support your department’s goals.

AI Support chatbot

Try our new AI-powered support chatbot to answer questions about the Drupal platform.