Campus alert status is green: For the latest UMMS campus alert status, news and resources, visit umassmed.edu/coronavirus

Search Close Search
Page Menu

Episerver CMS Blog

Using the Hero Video Block in EPiServer

Wednesday, May 05, 2021
|

Editing the Block 

There are 4 configuration tabs available in the block editor: 

  1. Video Settings 
  2. Content 
  3. Settings 
  4. Header Image 

Most of the configuration will occur in the Video Settings and Content tabs. The other two tabs are general to all EPiServer blocks so we won’t talk about those here. 

Video Settings 

imagertdmm.png

There are a few things you can configure on this block in the Video Settings: 

  • The type of video you’d like to use 
    • Wistia 
    • YouTube 
    • Vimeo 
    • Other 
  • Depending on which Video type you choose, there will be a source property for the Video 
    • Wistia has a Video ID 
    • All the others have a Video URL 
  • The Height of the Video Container
    • Used to arbitrarily constraint the height of the container so the video doesn’t get too high. 
  • Video Clipping behavior
    • Used to control the actual video placement in the container when clipping occurs. This only applies if you constrain the height of the container using the property above. 
  • Video Shift
    • Allows you to further refine position of the Video when clipping occurs by arbitrarily moving the video up or down by some number of pixels. 
  • Enable Auto Play
    • Allow you to indicate whether the video should auto play on page load. 

Constraining Height and Video Clipping 

Videos have a natural aspect ratio that must be maintained to prevent the video content from being distorted. When you place a video in a content area that extends the full width of the browser window, the video will get quite tall on certain displays. A Video that is that tall will push content well below the fold. 

In some cases, that is not desirable, and you may want to set the height of the video to a fixed height which will constrain the height of the video container, but that will cause some of the video to be clipped. 

You can set the clipping behavior that best suites the video you are using. You do that with the Video Clipping property: 

imageplmpn.png

Here’s what happens when you select each of those: 

  • Align Center – Clip Top/Bottom Evenly. This will place the actual video in the center of the video container and clip the top and bottom equally. Generally, this is a good choice. 
  • Align-Top - Clips BottomThis will align the video to the top of the video container and clip off any video that is larger than the video container. This is a good choice if you have people’s heads and such at the top of the source video. 
  • Align Bottom - Clips Top. This will align the video to the bottom of the video container and clip off the top of video that extends above the video container. This is a good choice if you have things at the bottom of the video that must be shown. This is probably not a great choice most of the time. 

You can refine the clipping by moving the video up or down by setting the Shift Video property. A positive number will push the video down and thus revealing more of the top of the video. You can use negative number to push the video up and revealing more of the bottom. This is really an edge case and generally the Clipping options will suffice. 

Content Settings 

These settings allow you to do two things, primarily: 

  • Apply Categorization to the Block 
  • Configure a Menu Overlay 

Categorization is a common thing that isn’t specific to this block, so we’ll just discuss the menu overlay. 

Configure Menu Overlay 

image0pfpn.png

Here’s a breakdown of the property options 

  • Dropdown Caption (Optional). This is a label that appears above the dropdown menu 
  • Selection Placeholder. This is the placeholder message that appears in the dropdown menu. It typically says something like “Select a Program” or similar. 
  • Dropdown Menu Links. When you enter these links, the menu becomes visible. These can be links to local content, external links, email, whatever. It’s a set of typical EPiServer Links. 
  • Dropdown Menu Width. This controls the width of the Menu. This prevents it from getting too large or too small. Often, as you can see in the screen below, the menu is set wider than it’s content for design purposes. 
  • Size of Text. This allows you to configure how big the text appears. Sometimes you’ll want the text a little smaller or larger than it would normally appear. Setting a percentage here will do that. 
  • Width of Content Area. This helps to center the menu in the video area . Typically, it is set to something like 1000px. 

Here is an example of what the menu might look like: 

imageip39.png