Change play icon and add clickable backdrop on embedded videos.

[Johnnycyan]

Description

This is a small change that just updates the icon displayed over embedded videos to be more minimal, with a slight hover animation, and allows the user to click the entire video embed area to initiate playback instead of just the button itself.

If you would prefer to keep the old button style but still add the backdrop clickable area, I could modify the change to do that. I just felt as though the button didn't really look right.

Comments weren't necessary as this is a very small change.

My reason for making this change is because when I was using Cinny and a friend sent me a video, the first thing I tried to do was just click the video area, and nothing happened. This initially led me to believe I had to download the video to watch it as I didn't notice the "Watch" button initially.

msedge_8zMThArQKJ.mp4

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

[github-actions]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[Johnnycyan]

I have read the CLA Document and I hereby sign the CLA

[ajbura]

i would like to keep the watch button as change makes it keyboard unfriendly and also does not follow design system.

a better alternative could be to just add the onClick and onKeyDown to the outer AbsoluteContainer.

also i think the problem is little more complex as the video can be spoiler also and same UX also need to be maintained with the Image message