Layout & Component Blocks
Embedded Video
Overview
The Embedded Video component allows you to display video content from external platforms (such as YouTube, Vimeo) or by uploading a video file directly. It provides a responsive frame for seamless playback and supports captions or transcripts for accessibility.
When to Use
- Enhance storytelling with visual media (e.g., student testimonials, campus tours).
- Deliver instructional content such as lectures, tutorials, or demonstrations.
- Showcase promotional videos for programs, events, or campaigns.
- Embed third-party hosted videos or upload original content for full control over hosting.
How To
Create an Embedded Video Component
- Navigate to the page you’d like to update, and enter the Edit Mode for the page.
- Choose the Section you would like to add the block, click the plus (+) icon.
- Select the Embedded Video component from the component list.
Select a Background Theme
- The background theme determines the image/color that displays behind the video.
Add an Image
The image serves as a placeholder that displays before a visitor clicks play on the video.
- Click Add Media button to add an image from the media library or to upload a new image.
- Caption: Add any relevant information to the caption to help describe the image.
Embed the Video
- Click Add Media button to add a video from an external URL or to select/upload a new video.
To Add or Select a Video
- To use a third-party URL, add it in the Remote Video left hand tab.
- To upload a video, click on the Video left hand tab.
Save Component
- After video has been selected, click Insert Selected.
- Click Save to commit selections.
User Experience Best Practices
- Use trusted hosting platforms like YouTube, Vimeo, or your company’s CDN. They provide optimized streaming, better performance, and reduce strain on your website’s servers.
- Avoid autoplay unless muted. Autoplay with sound can startle users, disrupt their browsing experience, and lead to higher bounce rates. It’s considered intrusive, and Google Chrome blocks it by default to protect user experience.
- Enable captions and add descriptive context for accessibility to ensure that users with hearing impairments or those in sound-sensitive environments can still engage with your content, and it also improves SEO.