The fourth type of content you can add to a multi-block within a grid cell is a Video. In this page's tutorial, we will review what the video types are and how to create them. There are two types of videos:

  1. In-line videos
  2. Pop-up videos

Defining In-Line and Pop-Up Videos

In-line videos are displayed between text and stay the size they appear when the play-button is pressed. 

Pop-up videos are displayed the same as in-line videos, but they expand into a pop-up when the play-button is pressed. Pop-up videos require adding an image to represent the video. This is the recommended video style since it makes the video appear larger.

As you can see below, the video on the left is an example of an in-line video, while the video on the right is an example of a pop-up video.

In-line and pop-up video examples

The following links will show examples of how in-line and pop-up videos will appear from Facebook, YouTube, and Vimeo.

Video Grid Cell Editor View

Before learning step-by-step instructions on how to add videos in a multi block, familiarize yourself with the video grid cell sections you will be editing.

  1. Video Heading (optional). The heading is the title you can ascribe the video in the grid cell. See examples of videos with headings (link).
  2. Video Heading-Background Color (optional). This is the background color that will appear if a video heading is provided. If there is no video heading, there will be no background color displayed.
  3. Video URL. Enter the FULL URL for your video (it should be Youtube, Vimeo, or Facebook)
  4. Video Image (Pop-Up videos). Create an image using the Spot image size (see below) that is consistent with the width of the grid cell. This is the image that will display before your video is played.
  5. Video Image Alt Text (Pop-Up videos). When providing a Video Image for a pop-up style video, you must enter Video Image Alt Text or you will receive an error message; see Troubleshooting: Cascade Error
  6. Play Video Inline? An inline video will play within the defined grid cell size on your page. Select “No” here to make your video pop out into the center of the page. See in-line and pop-up video examples.
  7. Play button shade (Pop-Up videos). The play button shade that you specify will be overlayed on top of the video image for a Pop-Up video. We recommend using a shade that contrasts well with the video image. The better the contrast, the more obvious the play button will be to the user.
multi-block-editor-view-video.png

Adding In-Line and Pop-Up Videos

Within a multi-block:

  1. Start with a new grid cell; if needed, add a new grid cell
  2. Set the grid cell width to any width
  3. Select "Video?" Yes option
  4. Optional: Enter a video heading and select a heading background color. The heading will appear above your video like a WYSIWYG heading.
  5. Enter the Video URL into the Video URL field (it should be Youtube, Vimeo, or Facebook)
  6. Decide if you want the video to appear as an In-Line or Pop-Up video:
    • For In-Line Videos: Select “Yes” to play the video inline.
    • For Pop-Up Videos:
      1. Add a Video Image using the Spot image size (see below) that is consistent with the width of the grid cell
      2. Enter Video Image Alt Text. If you do not provide alt text for the video image,you will recieve an error message; see Troubleshooting: Cascade Error
      3. Select “No - I want it to pop up in a lightbox”.
      4. Select a play button shade that contrasts well with the video image. (if the video image is dark, select "light" or “gold”; if the video image is light, select "dark" or “purple”)
SPOT width height
quarter 360 493
third 480 480
half 488 312
two thirds 658 316
full-width 820 273

 

Back to Top