fix: 🤔 play button vertical alignment of sd-video with description

[paulovareiro29]

Current behavior

The current implementation of the sd-video is breaking the vertical alignment of the play button when a description is added.

Also, clicking on the description activates the video.

Expected behavior

• The play button should be centered relatively only on the video element.
• Clicking the description should not start the video.

Steps to reproduce

• Go to the video template Video with Description
• Lower viewport width to better see the alignment issue.
• Click on the description to play the video.

Suggested Reproduction Tools

Video template docs

Technical Information

In the sd-video, the custom play button is an overlay button. The description is being injected alongside the play button, making the button use the description height as part of the its height calculation. Clicking the description plays the video because the button is overlapping the description.

DoR

• Item has business value
• Item has been estimated by the team
• Item is clear and well-defined
• Item dependencies have been identified

DoD

• Documentation has been created/updated (if applicable)
• Migration Guide has been created/updated (if applicable)
• Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
• Relevant stories (Features, A11y) are created/updated
• Implementation works successfully on feature branch

[paulovareiro29]

Duplicated issue since it will be fixed with #1631 fixes

[paulovareiro29]

Not duplicated after all, as it is not on the scope of #1631. Reopening