Close
Close
Search this website
Core Resources Blog
How-to

How to add videos in Cascade

  • Videos can easily be embedded in Cascade
  • Host any video you want to embed on a third-party platform, not on Cascade
  • Any video you add to your site or page should meet FIU’s web accessibility standards
By

There are several reasons you might add a video to your website or webpage. Videos can help grab visitors’ attention and make your content easier to read by breaking up long sections of text. Adding a video to your site or page in Cascade is a simple process.

It’s important to know that videos are not stored in Cascade itself. Instead, you will embed the video within the WYSIWYG editor or content box. We recommend using YouTube because it’s the most popular video platform and also makes embedding videos easy.

Finding a YouTube video’s embed code

1. Start by finding the YouTube video you want to use. Click the Share button below the video.
The location of the share button on a Youtube video.
 
2. This will open a new window with several sharing options. Next, click the Embed option.
The embed button on the youtube share page for a video.
 
3. You will then see a box that contains the video’s embed code. Click Copy to copy the code.
The embed code for a typical YouTube video.

Adding an embed code in Cascade

You can add videos anywhere you have a WYSIWYG editor.

1. After copying the video’s embed code, click the media icon in the editor. The insert media button inside a Cascade module
 
2. In the Insert/edit media window, click the Embed tab and paste the video’s embed code.
The insert media window with embed tab selected.
 
3. Before clicking Ok, add the <div class="flex-video widescreen"> element before the embed code and </div> after the embed code and the attribute loading="lazy" within the video’s iframe element, then click OK.
The insert media page with the embed tab open and filled with code
 

A complete video embed code should look like this:

<div class="flex-video widescreen">
     <iframe
         title="Video FIU commercial"
         width="560"
         height="315"
         src="https://www.youtube.com/embed/O6DBjrWDZr4"
         allowfullscreen
         loading="lazy">
     </iframe>
</div>

Making videos accessible

When you embed a video, there are a few key accessibility steps to keep in mind. Make sure the video snippet includes a title="" attribute. Usually, the video’s own title works fine, but if it’s something generic, give it a more descriptive name.

If the video has sound, it needs captions. There are different caption options available, and the goal is simple: Everyone should be able to understand and enjoy the video.