[JS] Add inline YouTube, Vimeo and Dailymotion video playback

[dclaux]

Related Issue

Implements #7111

Description

This PR:

• Updates the behavior of the Media element to use an embedded player (hosted in an iFrame) for YouTube, Vimeo and Daily motion videos
• Updates the Media element so it attempts to automatically pull a video thumbnail from the appropriate provider to use as a poster, unless the poster property is set
• Introduces a new public releaseDOMResources API that, when called, discards any expensive DOM resource that might have been instantiated
  • In the current implementation, only the Media element implements this method in a meaningful way, namely by disposing of the iFrame that embeds the inline player. After the iFrame has been disposed of, the Media element reverts to showing the poster.
  • This ability to release resources is very important in Teams where iFrames need to be disposed of when they are scrolled off screen to save memory and processing power.
• Refactors the Media element source to introduce a new extensibility point, making it possible for host applications to easily add support for additional embedded video players (e.g. Twitch and more)
• Fixes a problem with adaptivecards-designer-app where the various host app CSS files were no longer copied into the dist folder

Sample Card

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "text": "Inline YouTube video player demo",
            "wrap": true,
            "size": "Large",
            "weight": "Bolder"
        },
        {
            "type": "Media",
            "sources": [
                {
                    "url": "https://www.youtube.com/watch?v=YsqcODOEO-M&ab_channel=DavidClaux"
                }
            ]
        }
    ]
}

Replace the url in the above payload with these additional examples to test Vimeo and Dailymotion:

• https://vimeo.com/5543457
• https://www.dailymotion.com/video/x6wxwq4

Initial render, with poster pulled from YouTube:

After the play button is clicked:

How Verified

Verified manually in adaptivecards-designer-app

Microsoft Reviewers: Open in CodeFlow

[ghost]

Hi @dclaux. Thanks for helping make the AdaptiveCards JS renderer + tooling better. As additional verification, once the JS build succeeds, please go to the test site to test out your website/designer changes.

[ghost]

Hi @dclaux. This pull request has had no recent activity for the past 5 days . Please take the necessary actions (review, address feedback or commit if reviewed already) to move this along.

[paulcam206]

approved, but there are a couple of small tweaks to the schema text that we should probably take

[ghost]

Staleness reset by dclaux

[dclaux]

Thanks @paulcam206. I have made the changes you suggested.