[GRAV-1370] [BpkOverlay] Add video overlay style

[kirstybryce]

JIRA: https://skyscanner.atlassian.net/browse/GRAV-1370

The new homepage hero video ad POC requires a new video overlay. This PR adds that new overlay type to BpkOverlay as videoTop and videoBottom.

Link to Figma video overlay design: https://www.figma.com/design/yN0hFyZlKL0Jwbpi0rEKYT/Backpack-Beta?node-id=27362-1451&m=dev

No overlay	Video Overlay

Remember to include the following changes:

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[github-actions]

Visit https://backpack.github.io/storybook-prs/3717 to see this build running in a browser.

[github-actions]

	Warnings
⚠️	Package source files (e.g. packages/package-name/src/Component.tsx) were updated, but type files weren't. Have you checked that no types have changed?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against e41843e

[olliecurtis]

We will need to have a videoTop and videoBottom overlay types looking at the figma design :)

[kirstybryce]

Hi, the reason I made it as one overlay is for 2 reasons:

• simplicity of having one overlay used for the homepage video component instead of 2
• since the video top overlay is only taking up 40% of the height at the top of the overlay, and the video bottom overlay is taking up 60% of the height at the bottom of the overlay, it seemed better to have a full overlay with those value since the current top/bottom overlay are taking up 100% of the height of the overlay. If I created a separate video top/bottom overlay they wouldn't be consistent with the other top/bottom overlays so it seemed better to have a separate video overlay like the vignette.

Do you think it would be better as top/bottom? Happy to change it if so :)

[olliecurtis]

Thanks for the response!

Checking the Backpack designs and with the designers, it would be expected to be two separate types of overlay for videos :) so shouldn't ever have both the top and bottom turned on at the same time.

If we would expect that to happen, then we should talk with design to get this changed at its design level to then reflect that into the code

[kirstybryce]

ok makes sense, will update :)

[github-actions]

Visit https://backpack.github.io/storybook-prs/3717 to see this build running in a browser.

[github-actions]

Visit https://backpack.github.io/storybook-prs/3717 to see this build running in a browser.

[github-actions]

Visit https://backpack.github.io/storybook-prs/3717 to see this build running in a browser.

[github-actions]

Visit https://backpack.github.io/storybook-prs/3717 to see this build running in a browser.

[github-actions]

Visit https://backpack.github.io/storybook-prs/3717 to see this build running in a browser.