how can I reproduce a youtube video card in bot framework emulator?

[jesusespinel1]

Title: How to Embed and Play YouTube Videos in Bot Framework Emulator Using Video Cards and Iframes (C#/.NET)

Description: I am seeking guidance on how to embed and play YouTube videos within a video card in the Bot Framework Emulator, utilizing iframes, with a focus on implementing this in C#/.NET. Despite my efforts, I have encountered challenges in achieving direct video playback within the Emulator.

My questions are as follows:

1. What are the steps and best practices for embedding and playing YouTube videos directly within a video card in the Bot Framework Emulator using iframes, specifically in a C#/.NET environment?
2. Are there any specific iframe configurations or parameters that need to be set within the C# code to ensure seamless video playback?
3. Could you provide code examples illustrating how to create a video card containing an iframe with the YouTube video URL, ensuring compatibility with the Emulator?
4. Are there any known limitations or restrictions when using iframes to embed YouTube videos within video cards for testing in the Emulator?

I kindly request assistance, detailed steps, and code examples in C#/.NET to overcome this challenge and successfully enable YouTube video playback within video cards in the Bot Framework Emulator.

Your support and insights will be greatly appreciated. Thank you for your expertise in helping me address this issue effectively.

[InfinytRam]

Hi @jesusespinel1,

In the Microsoft Bot Framework, sending rich content like videos can be sent with "cards". Specifically for videos, we can utilize the 'VideoCard' class.

Instead of embedding the entire video, the VideoCard references the video via a URL. When the card is sent to a channel (like Teams or WebChat), it renders a video for the user to play the video directly from the chat.

C# code example:

// Construct a Video Card with the video's details
var videoCard = new VideoCard
{
    Title = "Sample Video Title",
    Subtitle = "Description of the video",
    Media = new List<MediaUrl> { new MediaUrl("URL_TO_VIDEO_FILE") }
};

// Send the card as an attachment in a message
var reply = MessageFactory.Attachment(videoCard.ToAttachment());
await turnContext.SendActivityAsync(reply);

URL_TO_VIDEO_FILE is the link to the video content. The channel handles the streaming/display of the video based on this URL.

Please checkout sample 06.using-cards to see how the bot demonstrates rich cards to play videos.

Here is official documentation for Adding rich card attachments to messages in Bot Framework: https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-add-rich-cards?view=azure-bot-service-4.0

[jesusespinel]

Thanks You for answerr, in this case the URL does not work in the bot emulator but in the web chat can render ? But the video card onlynreproduce mp4 videos ?

[InfinytRam]

Thanks @jesusespinel,

I'll test the video card in Emulator channel to see if it works in Emulator.

Also, I will test other video file formats like .AVI, .FLV, .MOV, etc.... to see if these videos also play and not just MP4.

@jesusespinel, I will report back soon. Thanks.