Video

Embed videos from platforms such as YouTube and Vimeo directly into your page.

Definition

The Video component in Columbia Sites enables you to embed videos from platforms like YouTube and Vimeo directly into your pages. This feature supports the addition of captions and transcripts, enhancing accessibility and user engagement.

NOTE: this is not to be confused with adding videos for the Video Library

Specifications and Usage

When to Use:

  • To embed a single video within the content of a page.

  • To provide multimedia content that complements the textual information.

  • To enhance user engagement through visual and auditory means.

Specifications:

  • Supported Platforms: YouTube and Vimeo.

  • Embed Code: Must be a clean <iframe> tag without additional parameters.

  • Transcripts: Optional but recommended for accessibility.

  • Captions: Optional; appear below the embedded video.

How to Add a Video

On the page where you want to add a video, select “Add Video” from the available content options

Add video

Insert the Video Component:

  • Within the editor, select Add Video from the available content options.

Obtain the Embed Code:

  • YouTube:

    • Click on the Share button below the video.

    • Select Embed and copy the <iframe> code.

    • To prevent unrelated recommended videos from appearing after playback, add ?rel=0 to the video URL within the embed code.

  • Vimeo:

    • Click on the Share button on the video page.

    • Copy the <iframe> embed code.

    • Ensure you only copy the <iframe> tag and exclude any additional scripts or text.

Clean the Embed Code:

  • You MUST use only the essential portion of the embed code. Example:

    • <iframe width="560" height="315" src="https://www.youtube.com/embed/1Qk8YX9_6wA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

  • Optionally add ?rel=0 to the end of the src URL to disable suggested videos. Example:

    • <iframe width="560" height="315" src="https://www.youtube.com/embed/V07M1BygoQc?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Paste the Embed Code:

  • In the Embed Code field of the Video component, paste the cleaned <iframe> code.

[Optional] Add a Caption:

  • Enter a brief description or title for the video in the Caption field. This text will appear below the video.

[Optional] Add a Transcript:

  • Provide a full transcript of the video's audio content in the Transcript field. This enhances accessibility and allows users to read the content if they cannot watch the video.

Enter video details

Save Changes

Best Practices

  • Accessibility:

    • Always provide transcripts for videos to accommodate users with hearing impairments.

    • Use clear and descriptive captions to summarize video content.

  • Performance:

    • Limit the number of embedded videos per page to ensure faster loading times.

  • Content Relevance:

    • Ensure that the video content is directly related to the surrounding text to maintain coherence.

  • Embed Code Cleanliness:

    • Your embed code must end with </iframe>. Ensure the full code fits within the field and that the closing </iframe> tag is visible. If it’s not, you must clean the code before saving.