Using Video in Drupal

UCR's Drupal sites restrict direct video upload. Instead, editors are encouraged to use external video hosting platforms and either create references using the Media Library or embed content directly. Most notably, videos are used in two ways, one for a header that typically uses a montage of b-roll clips without audio or secondly, an informational video that is embedded into the primary region of a page.

Read the information on this page for options to provide video content on your site. For more detailed information please see Working with Video. 

Adding a Header Video

There is a specific header region called the Hero Panel Content Region where images or videos can be displayed as "heroes". It is set up specifically to display under the menu and span full width across the site. It is recommended to use a permanent link from the Yuja platform. Learn how to use Yuja with Drupal. Alternatively, a hosting platform that utilizes an mp4 link would also be acceptable (such as some Vimeo links). Keep in mind that header videos will not display on mobile devices. The following ratios will help in determining optimal video sizes for your headers. 

Header with Video - Xlarge (example: TV screens or wide screens): Focal Point Scale and Crop 2440×700
Header with Video - Large (example: most monitors): Focal Point Scale and Crop 1920×555 
Header with Video - Medium (example: larger laptops): Focal Point Scale and Crop 1024×300
Header with video - Small (example: laptops, tablets): Focal Point Scale and Crop 768×450

• Option 1 - The simplest way to add a video header is using the "Header Options" on a basic page. Open the Video Options and add the video's URL. Be sure to include an image as a fallback for mobile devices. Using this option automatically will place the video in the Hero Panel Content region.
• Option 2 - Create a "Custom Header and Title" block from the Custom Block Library. This one can be placed on any number of pages and isn't limited to a basic page. There is also some variety in the overlay text. Once created, it will then need to be placed in the Hero Panel Content region with visibility restrictions using Block Layout, a builder permission. 

*Note - Other video platform URLs may work sufficiently but keep in mind that some players add additional wrappers around their embedded videos and the display may differ. 

Adding Video in the Primary Content Region

There are several ways to accomplish adding a video. Editors can either create a reference to the video using the Media Library or obtain an embed code of the video from the hosted platform.

Media Library Video Reference

Add your video URL as a reference in the Media Library for easy access when adding to a page or content block. This works best with Youtube URLs. To create a video reference, go to Content -> Media -> Add Media -> Video. It will need a title and URL. 

Once the video has been made a reference, this video can be accessed through the "star" icon on any wysiwyg editor. Click on the "star" icon in the editor (found on the body content, basic block, and introduction section of a custom block) and filter/search for the video. This will embed the video to 100% of the column size it is placed. 

Direct Embed

For streaming services or video platforms that are not able to be referenced in Drupal, embeds typically can be found for that service/platform. When using an embed code, there are a few things to keep in mind. 

1. Make sure, if there is an option, to select the responsive embed code. We don't want to see specified pixel width and lengths in the code. 
2. Copy all the code from the beginning of < to the end of >. 
3. When pasting in the embed code to the Drupal site, it will need to be done in "Source" mode of a wysiwyg editor. To get to the "Source" mode, select the Text format option "Rich Text Editor (Source)". Then, a "source" option will be displayed on the editor as the last icon. Click on the "source" button. 
4. When in source mode, paste in the embed code where you want the video to go, usually this would be between paragraphs. You don't want to paste it between sentences or inside of other code. 
5. Click out of "source" mode before saving the block or page.