Add Video Component to support Drupal Canvas

Problem/Motivation

We need to develop a new Video component that is fully compatible with Drupal Canvas and aligned with Bootstrap 5 standards.
The component should provide a flexible and reusable solution for embedding and displaying videos with proper responsiveness and accessibility support.

The Video component will be used across landing pages, hero sections, promotional areas, tutorials, and content pages where media engagement is required.

Key requirements:

• Bootstrap 5 responsive embed support
• Canvas-compatible configuration
• Support for uploaded media and external video URLs (YouTube, Vimeo, etc.)
• Responsive behavior across all breakpoints
• Optional aspect ratio control (16:9, 4:3, custom)
• Optional autoplay, controls, and mute configuration
• Accessibility compliance (title/aria attributes)
• No inline CSS/JS (SCSS-based styling only)

Steps to reproduce

1. Add the Video component in Drupal Canvas.
2. Upload a video or provide an external embed URL.
3. Select aspect ratio option.
4. Configure playback settings (autoplay, controls, mute).
5. Verify responsive behavior across desktop, tablet, and mobile.

The video should scale responsively, maintain proper aspect ratio, and render consistently within different layout contexts.

Proposed resolution

• Develop a new Video component using Bootstrap 5 responsive embed utilities.
• Support both uploaded media and external video embedding.
• Implement configurable aspect ratio options.
• Provide playback configuration settings.
• Ensure accessibility compliance with proper semantic markup.
• Move all styling to SCSS and remove inline CSS/JS.
• Ensure full Canvas schema compatibility.

The Video component will provide a responsive, accessible, and reusable media solution aligned with Varbase and Bootstrap 5 architecture standards.

Remaining tasks

• ✅ File an issue about this project
• ❌ Addition/Change/Update/Fix to this project
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ❌ Code review from 1 Varbase core team member
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• N/A