FR: [V2 Cards] - Video in Thumbnails

[ZoeBeykirch]

Context/Description

As a Mack Trucks content author, I want to add video content into the V2 Cards block so that I can enrich the recommended bulldog magazine articles and other web pages with more engaging multimedia content that will enhance the user experiences.

Acceptance Criteria

This ticket should be picked up after https://github.com/hlxsites/vg-macktrucks-com/issues/750

User AC:

• [ ] As a website user, I expect to see thumbnail video clips in the recommended article section while I'm reading a Bulldog Magazine article.

Editor AC:

• [ ] As a content editor, I can add this block to any page.
• [ ] As a content editor, I can use this block from the AEM Sidekick Library.

Non-functional AC:

• [ ] The block variant will be named: "V2 Recommendations (limit-3) with video"
• [ ] The block can use a 30 second video clip without sound.
• [ ] The block will use custom controls: play/pause
• [ ] The block will be responsive so that they display is correct across different devices and screen sizes.
• [ ] The videos should load efficiently without significant buffering or delays.
• [ ] The block can be used in #603

Out of scope

• AEM Asset integration is not required if it will cause a blocker.
• Videos with sound, therefore no mute/unmute functionality is required.
• Autoplay (can be handled in a separate ticket if needed).

Attachment / link to Figma

Desktop: https://www.figma.com/design/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?m=dev&node-id=14119-2407

Mobile: https://www.figma.com/design/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?m=dev&node-id=2222-52924