How to Add a Video to a Webpage

Adding videos to the campus video solution Kaltura is beneficial because Kaltura will automatically add captions to uploaded videos. Note: Captions will need to be reviewed since the captioning service may wrongly interpret words. Once the video has been uploaded to Kaltura, contact the Office of Accessible Technology and Services for support on their Captioning Support Service.

1. Login and upload the video to the Campus Video solution https://media.csuchico.edu/ 

Kaltura support ticket

2. Once the video is added, copy the embed code. This code will be used to add the video into the webpage.

Note: You must login to get the embed code.

enter the share tab to copy the embed code used to display a video into a webpage

3. Edit embed code to follow accessibility best practices.

The following code is an example from the video "Outdoor Nation Contest - Chico State"

Paste the embed code in a word editor to better edit the code.

example on how your embed should look once pasted into Cascade

  • id="" - is removed because it is bad practice having identical id's in a single webpage, removing the id prevents having multiple videos with the same id tag.
  • frameborder="" - is removed because is bad practice having styles within the HTML code.
  • title="" - the title tag needs to contain the name of the video within the quotes "" in this example the title tag is title="Outdoor Nation Contest - Chico State". The title tag is what is read out to a user using a screen reader.
  • <div class="responsive-embed">Embed Code</div> - the class="responsive-embed" is added so the video can automatically resize when the video is being watched in different screen sizes.

4. Paste the code in the Cascade webpage.

In the edit view, select the "Play" Icon

select the play icon to enter the location in where you'll add the video source code

Paste Embed code

Enter the Embed tab and paste embed code

Select Ok. Save and Submit page.

Resources

Print Article

Details

Article ID: 113813
Created
Tue 6/4/24 12:41 PM
Modified
Tue 6/4/24 12:41 PM