CR: Medium - Video module issues with unexpanded / expanded state

[ZoeBeykirch]

For the expanding video module block on the redesign homepage, the video should not revert to unexpanded state when the user continues scrolling down the page. The video should only revert to the unexpanded state if the user scrolls up, past the video module.

Current Result:

Desired Result: https://www.figma.com/file/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?type=design&node-id=410%3A1174&mode=design&t=16k2LeP6swpEqDov-1

[DanielaPedrochevd]

Agile requirement As a user, when I scroll down after watching an "expanded" video, the video remains expanded to make my experience nicer.

Description Alter the current volvo video block to make sure that when you scroll out of the video, it continues to be expanded.

Acceptance Criteria

• [ ] As a user, I can scroll downwards to a video block and the video expands when it's within the viewport. When I scroll out of the video, the video stays expanded.
• [ ] As the module scrolls into viewport, video enlarges to expanded state
• [ ] Video remains in expanded state, unless user scrolls back up the page. Then, the module will reset back to the default state.
• [ ] If the user continues scrolling down the page, the video should remain in its expanded state
• [ ] Animation is prototyped between component states
• [ ] Video enlarges also on mouse hover

NOTE: For a11y purposes, the pause button should also be visible in the unexpanded state

Open point:

• [x] Should the hover effect be removed, and keep only the scroll behavior? -> remove scroll behavior

[cogniSyb]

The pause button can be moved with translate, taking into account --video-inset

[shirin27]

Kamino cloned this issue to hlxsites/vg-volvotrucks-us