fix(embed): make component focusable, only show control/placeholder on video

[lucivpav]

This PR resolves issue #1767, which states that:

the pause control button is visible, even if we are using an iframe in Embed component.

This PR also resolves issue #1742 by making the Embed component focusable using keyboard.

Other changes

• control button, placeholder is not shown when video prop not set
• background set to colorScheme.brand.background
• added YouTube example

TODO

• accessibility is broken even on master, this will be fixed in another PR

[codecov]

Codecov Report

Merging #1758 into master will increase coverage by 0.01%.
The diff coverage is 80%.

@@            Coverage Diff             @@
##           master    #1758      +/-   ##
==========================================
+ Coverage   69.77%   69.78%   +0.01%     
==========================================
  Files         870      870              
  Lines        7486     7496      +10     
  Branches     2176     2204      +28     
==========================================
+ Hits         5223     5231       +8     
- Misses       2255     2257       +2     
  Partials        8        8

Impacted Files	Coverage Δ
...t/src/themes/teams/components/Embed/embedStyles.ts	0% <0%> (ø)	⬆️
packages/react/src/components/Embed/Embed.tsx	96.15% <100%> (+1.7%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f594298...77af826. Read the comment docs.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://stardust-react-git-fix-embed-focus.stardust-ui.now.sh

[lucivpav]

@alinais please review this PR again, it has changed quite a bit since last time

[miroslavstastny]

👍