How do I display a YouTube video in webViewer?

September 21, 2022

I’m trying to play a video in my C# WinForm.

Here is what I have so far:

I have a webViewer control in my form, and the following code:

// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);

Here is what it looks like when I run my app:

The problem is that the video does not fill up the entire webViewer (which is the white part in the image).

I have the webViewer1.Anchor property set to all, so when I resize the form, the webViewer resizes based on the form.

Note:

When the user clicks the fullscreen button the problem is fixed. But this is a bad solution for me because it’s a bad experience for the user. Plus, the user may not know that they need to click the fullscreen button. This is what that looks like:

How do I make the video take up the entire webViewer without the user having to click the fullscreen button?

Is there a way to programmatically click the button? Remember I am using C# WinForms.

Also, as a side-question, when the user clicks the "YouTube" button, it opens Internet Explorer, and not the default browser. How do I fix this?

>Solution :

You need to fix the styling of your page:

// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html style='width: 100%; height: 100%; margin: 0; padding: 0;'><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "</head><body style='width: 100%; height: 100%; margin: 0; padding: 0;'>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);

This ensures that the HTML and BODY tags occupy 100% of the page, and that allows the child iframe to occupy 100% of the page. That generates this HTML:

<html style='width: 100%; height: 100%; margin: 0; padding: 0;'>
    <head>
        <meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
    </head>
    <body style='width: 100%; height: 100%; margin: 0; padding: 0;'>
        <iframe id='video' src='https://www.youtube.com/embed/5aCbWqKl-wU' style="padding: 0px; width: 100%; height: 100%; border: none; display: block;" allowfullscreen></iframe>
    </body>
</html>