Videos

For video content, the Web Theme offers three ways to embed content. Our demo site page shows all three examples of video content in action.

The UCSB Web Theme is transitioning from CKEditor 4 to CKEditor 5. Some sites may still use the older CKEditor 4 toolbar, while updated sites will use CKEditor 5. Use the instructions that match the editor shown on your site.

Hero Videos

In the Hero section on the Edit page, MP4 videos can be embedded using the 'source' button. This embed field consists of a text area that only accepts raw HTML. For content editors, consider copying and pasting this code below from the dummy page on your Web Theme site and change the file path to match yours. If this page doesn't exist or was deleted, please contact us or your dep't site administrator for assistance.

Example video embed for MP4 with the size 1883x672 pixels.

1. Upload the video to the server first. This can be done by going inside a column and uploading the video the same way you would add an image in the editor toolbar. 
2. Copy the url of the video file prior to exiting the media upload window. The url of the file is also accessible under the 'Files' or 'Media' tab from the Content page. In the example above, all we need is the url path that appears after the domain (/sites/default/files/2021-10/Campus-Experience.mp4).
3. In the Hero Video field, enter the HTML video code and replace the url's.
4. In the example above, we also used the HTML attributes autoplay and loop. This means, upon page load, the video will autoplay and will loop an infinite amount of times. If either of these features are not desired, consider not adding them. Explore other HTML video attributes.
5. For videos used at the top in a hero capacity, they must be optimized and be small in file size (as much as possible) so they load quickly.

Single Video Embed

Embed a YouTube video inside a blade easily and it will look good in both mobile and desktop views.

CKEditor 5

1. Go to a Basic Page and select Add Blade.
2. From within the blade, go to the Body field inside the desired column.
3. Select Insert Media from the editor toolbar.
4. Select Remote video from the media options.
5. Enter the YouTube URL in the Add Remote video via URL field.
6. Select Add.
7. Review the video title and thumbnail.
8. Select Save and insert.
9. The video thumbnail should display inside the Body field.
10. Select the desired width for the column. We recommend 4–7.
11. Save the page.

If you do not see Insert Media or Remote Video, please contact us or your site administrator for assistance.

CKEditor 4 Legacy Instructions

Use these instructions only if your site is still using the older CKEditor 4 toolbar.

1. Go to a basic page, and select "Add Blade"
2. From within the blade, go to the Body inside of the first column and select the 'Video Embed' icon. A new window will appear.
3. Enter the URL retrieved from YouTube and paste it in. Leave the two boxes checked.
4. Save. The video thumbnail should display inside the Body field.
5. Select the desired width (we recommend 4-7) for the column and save the page.

If you don't see the 'Video Embed' icon available for your Basic Page, please contact us or your site admin for assistance.