如何在 webViewer 中显示 YouTube 视频？答案

【问题标题】：How do I display a YouTube video in webViewer?如何在 webViewer 中显示 YouTube 视频？
【发布时间】：2023-02-16 21:42:48
【问题描述】：

我正在尝试在我的 C# WinForm 中播放视频。

这是我到目前为止所拥有的：

我的表单中有一个 webViewer 控件，以及以下代码：

// 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]);

这是我运行我的应用程序时的样子：

问题是视频没有填满整个 webViewer（这是图像中的白色部分）。

我将 webViewer1.Anchor 属性设置为全部，因此当我调整表单大小时，webViewer 会根据表单调整大小。

笔记：

当用户单击全屏按钮时，问题就解决了。但这对我来说是一个糟糕的解决方案，因为这对用户来说是一种糟糕的体验。另外，用户可能不知道他们需要点击全屏按钮。这就是它的样子：

如何让视频占据整个 webViewer 而无需用户单击全屏按钮？

此外，作为附带问题，当用户单击“YouTube”按钮时，它会打开 Internet Explorer，而不是默认浏览器。我该如何解决？

【问题讨论】：

除了以百分比指定高度，您可以以 px 指定它吗？尝试使用 500px 而不是 100%

标签： c# winforms

【解决方案1】：

您需要修复页面的样式：

// 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]);

这可确保 HTML 和 BODY 标记占据页面的 100%，并允许子 iframe 占据页面的 100%。生成此 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>

【讨论】：

我收到错误消息：此页面上的脚本中发生错误。行：34。字符：14。错误：预期标识符。代码：0。网址：youtube.com/s/player/7577aaa2/www-embed-player.vflset/…。
@约翰嗯。我刚刚测试过，可以确认。我添加了一个绝对有效的替代解决方案。
谢谢！由于您编辑了答案，因此效果很好。

【解决方案2】：

我认为您需要设置纵横比。在此处签出文档

https://www.w3schools.com/howto/howto_css_responsive_iframes.asp

【讨论】：

【解决方案3】：

我正在使用 vs2019。我不知道为什么。试了一下，是黑屏状态，不显示视频。

【讨论】：