Embedding a Video into Your Cascade CMS Page
Please follow the instructions below to add (embed) a video to your Cascade CMS webpage.
The first step is to get your video into a hosting environment like Facebook, YouTube, Vimeo. You can find out the supported file formats on YouTube and Vimeo directly. We primarily use Facebook and YouTube, and can upload your file to the main Chapman YouTube account, if needed. Please send your video file and supporting materials to your web coordinator so they can work with the Digital Media team to upload the files. When you do submit the video, make sure to include this information:
- Video credits (who made it):
- Listed or Unlisted? [yes or no] – unlisted means it can only be found on YouTube by the url, but still is embeddable.
Embedding a Video
Once you have your video on Facebook, YouTube or Vimeo, just follow the instructions below to locate and copy the embed code in to your webpage.
Step 1: Go to the Facebook post, YouTube or Vimeo page with your video. If SMC uploaded it for you, we will send you the direct link.
Step 2: Locate the embed code for the video.
- For Facebook, go to the video and click the “…” icon in the upper right corner and click “Embed”
- For YouTube, this is located below the video under the Share>Embed tabs. Note: under the “show more” drop-down below the embed code, you can choose a few additional options that allows you to turn off suggested videos (other videos that appear at the end of your video) and turn off titles.
- For Vimeo, the share feature is located on the video itself, as a right side icons. Push the icon that looks like a paper airplane and it will open a dialog box with embed details. Note: the “show options ” feature allows you to implement features like looping, autoplay and title showing.
Step 3: Once you have identified your desired settings in each of these environments, go ahead and copy (right click/copy or control+C) the embed code that they give you. This is the code that starts with “<iframe … ”
<iframe src=”//player.vimeo.com/video/114889866″ width=”500″ height=”281″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Step 4: Now that you have the embed code on hand, you need to sign into the Cascade CMS and navigate to the edit mode of the specific page you want to add the video. If you are not familiar with this process, go to Getting Started: Cascade CMS.
Step 5: In the edit mode, navigate to the area you want to embed your video. Most likely this will be your “primary content” area in a “text editor” widget of the page. Note: video can only be added to sections that allow for html code. This can be determined by the appearance of the style options like bullet points, justification, bold, etc.
Step 6: Place your cursor within the edit box where you want to to have the video, then select the icon that looks like a green film strip. Note: allow space for the video to break your text vertically.
Step 7: Once you push the icon, a dialog box will appear (shown below). In this dialog box, navigate to the second tab called “embed code.” This is where you will past the code that you copied from YouTube or Vimeo. You will be replacing the default code that appears when you enter. Do this now and then push “Ok.”
Step 8: Now that you have added the code to your page, the video will appear within your edit screen. Don’t worry about placement of this box since the videos are styled to expand the length of the primary content area when viewed on the live site.
Step 9: Once you have done this and any other edits on the page you needed, go ahead and submit the page for approval and you are done. Your video will look like these samples live.
If you have any additional questions, please contact your Web Coordinator.