A component to render Youtube/Vimeo videos

[sunilkumardash9]

Describe the bug

It seems gr.Video() is not able to render youtube videos.

It works perfectly with URLs like https://f.vimeocdn.com/_videos/home/desktop-masthead-720p-2.mp4

But cannot render videos like https://vimeo.com/829951809 or https://www.youtube.com/watch?v=MHlNcKr9g50&list=RDMHlNcKr9g50&start_radio=1

Is there an existing issue for this?

• [X] I have searched the existing issues

Reproduction

import gradio as gr

with gr.Blocks() as demo:
    video = gr.Video(interactive=True)
    url = gr.Textbox()

    url.submit(lambda x:x, inputs=url, outputs=video)

demo.launch()

Screenshot

No response

Logs

Logs are Normal

System Info

gradio==3.31.0

Severity

annoying

[abidlabs]

Hi @sunilkumardash9 this is by design as the video component only supports direct filepaths or full URLs to video files. We process videos in certain ways that would require downloading YouTube videos and there isn't a reliable way to do that from YouTube and Vimeo.

That being said, we are working on letting community members build their own components and I could imagine interest in building a community component specifically designed to handle YouTube/Vimeo components so I'll rename the issue as such.

You could also by the way, currently use a gr.HTML component and pass in the code to embed the YouTube/Vimeo video.

[abidlabs]

Hey! We've now made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text
• A "Folium Map Viewer" component that allows you to use interactive maps

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. Hopefully this will help address this issue.

[abidlabs]

I'll go ahead and close this issue since we are not planning to include this in the core Gradio library. But happy to help if you are interested in making this a custom Gradio component (feel free to ask questions in this issue).

[sunilkumardash9]

@abidlabs Thanks, I will take a shot at it.