FR: video in hero

[cogniSyb]

Agile Requirement
As a business owner I want to have a Hero block that will autoplay video content, which includes a pause button, so that users have the ability to let the video play while they interact with the page or stop it if they want to.

Acceptance Criteria
Hero block

• The Hero block contains a video background that autoplays when a user enters the page
• A pause button is located at the top right corner overlapping the media content of the hero block and is visible the entire time

Pause button

• The button must be discernible from other controls and be clearly labeled and icon that indicates its functionality
• The pause/play button should be accessible to users navigating via keyboard, meaning it should be focusable and actionable using keyboard inputs. The focus style should be the same as for the scroll to top button
• Upon pressing the pause button, the autoplay video should immediately stop playing
• Once the video is paused, the [pause button should change to a play button]

(https://www.figma.com/file/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?type=design&node-id=566-2770&mode=dev)

Questions

Notes

• Created button Pause button for autoplay videos vg-volvotrucks-us-rd#156
• Hero block Hero vg-volvotrucks-us-rd#41

Previous notes:

Extend the hero by allowing an autoplay video as well for the hero.

Pause button to be created, see Netcentric/vg-volvotrucks-us-rd#156.
Blocks with an autoplay video should have a pause button, to comply with accessibility standards. Specifically, we’re mitigating Failure 93 of Success Criterion 1.4.2.

Designs have been adjusted to show a pause button. For now, we’re focusing on the hero Netcentric/vg-volvotrucks-us-rd#41, the design is available.

The video player for autoplay videos should have a visible pause button when the video starts playing
The button must be discernible from other controls and be clearly labeled and icon that indicates its functionality
The pause/play button should be accessible to users navigating via keyboard, meaning it should be focusable and actionable using keyboard inputs. The focus style should be the same as for the scroll to top button
Upon pressing the pause button, the autoplay video should immediately stop playing
Once the video is paused, the pause button should change to a play button
The button should be large enough to be easily tapped on touch devices without accidentally pressing adjacent controls

[BeckyMedlin]

@cogniSyb Is this considered an enhancement?

[cogniSyb]

Yes @BeckyMedlin, this came out of a call recently with business and design.

[shirin27]

Kamino cloned this issue to hlxsites/vg-macktrucks-com