[background-media]: Adjust the ratio of the video background to account for 1:1 (half-width) treatment within Leadspace

[proeung]

JIRA ticket: https://jsw.ibm.com/browse/ADCMS-3189

---

The problem

• The current <dds-background-media> component offers full-width background video treatment, however, it's missing a 1:1 ratio container which takes up half/8 cols of the Leadspace container.
• This option is needed for ambient/graphic animation videos that are prominent on our PGL (Product Growth Lead) pages.
• Attached is an example of the video position/alignment issue that we're seeing right now - https://prod-author.roks.cms.cis.ibm.net/editor.html/content/adobe-cms/language-masters/en/testing/amanda-test-page/leadspace-test-amanda.html

The solution

• Add a prop to the <dds-background-media> component that allows an adopter like AEM to set the container of the video background to 1:1/Square instead of 16:9/Full width

- See the v19 Leadspace 2E for an example - https://pages.github.ibm.com/MSC-Cloud/hc_fractal/components/detail/2e--html5-video.html
![Screen Shot 2023-04-12 at 4 28 37 PM](https://user-images.githubusercontent.com/1815714/231577862-34751025-6a39-48bb-85b8-851691a6a955.png)

- @areagan1030 Please include design specs, if you have one defined within the Leadspace design. 

### Application/website

AEM

### Business priority

Medium Priority = upcoming release but is not pressing

### What time frame would this ideally be needed by (if applicable)

_No response_

### Examples

_No response_

### Code of Conduct

- [X] I agree to follow this project's [Code of Conduct](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/.github/CODE_OF_CONDUCT.md)
- [X] I checked the [current issues](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues) for duplicate issues

[proeung]

@oliviaflory and @areagan1030 I'd love to get both of your inputs on this issue so that we can open a PR that follows the correct specs and provide documentation for proper guidance/usage.

[andy-blum]

@oliviaflory @areagan1030 is this something that's worth keeping open?

[oliviaflory]

@andy-blum I think so. We had someone asking for a 1:1 image (or 50/50 lead space as @areagan1030 and I call it) recently. @RichKummer is currently exploring the 50/50 image and how the typography would be affected this sprint. Specifically looking at if the image should be allowed to span to the edge of the lead space container or be inset (like the currently homepage design).

Do you happen to know how it's being implemented on the homepage right now? I cannot remember if the homepage is in AEM yet, or if ya'll built the current homepage lead space in the Carbon for AEM repo?

[andy-blum]

Homepage is not in AEM yet, but the 50/50 leadspace exists in CAEM.

https://pages.github.ibm.com/webstandards/carbon-for-aem/canary/index.html?path=/story/components-lead-space--container

[oliviaflory]

Ooo ok, let me get back in touch with @areagan1030 about the lead space initiative, I see a few differences in the CAEM version vs what Rich is exploring.

Then we'll sync up again to decide if we keep this ticket or possibly bring the CAEM version into C4IBM instead.

[areagan1030]

@oliviaflory @andy-blum From a current AEM perspective, we would not prioritize this at the moment, since the only video option for this leadspace would be using MediaCenter — and this is a pretty awful experience all around. While ambient videos/animations would be more viable for motion in this leadspace, an open question might be how designers would set up the asset canvas and crop in AEM — I'm assuming this would still require empty space to sit behind copy/CTA elements at the bigger breakpoints. This may open the question of whether a 50/50 setup would be a more effective setup for animation?

@oliviaflory We can definitely find time to sync up on what we got into AEM for the 50/50!