如何在 Blazor 中正确嵌入 <iframe>？（YouTube）

Question

我的 Blazor 页面上使用 <iframe> 容器的标准 YouTube 嵌入式视频无法正确加载。没有加载任何内容。

<iframe width='560' height='315' src='https://www.youtube.com/embed/m8e-FF8MsqU' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>

在我的页面中，link 实际上是用 link 编辑 @video link，但结果是一样的。

<iframe width='560' height='315' src='https://www.youtube.com/embed/@video' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>

查看源代码，在 #document 下构建了一个几乎是空的 <html> 结构。

<html><head></head><body></body><link type="text/css" id="dark-mode" rel="stylesheet"><style type="text/css" id="dark-mode-custom-style"></style></html>

在正常的 HTML 页面中，结构中充满了来自 Youtube 的内容。（缩短）

<!DOCTYPE html>  <html lang="en" dir="ltr" data-cast-api-enabled="true">
<head><meta name="viewport" content="width=device-width, initial-scale=1"><style name="www-roboto" >@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51S7ACc3CsTKlA.woff2)format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}

如何正确嵌入以便它在 Blazor 中按预期工作？

Answer 1

我已经测试了 YT iframe，它在 blazorserver 和 blazorwasm 上运行（Net Core 3 预览版 9）：

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@if (currentCount % 2 == 0)
{
<iframe width="560" height="315" src="https://www.youtube.com/embed/oJYGSy6fRic" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
}
else
{
<iframe width="560" height="315" src="https://www.youtube.com/embed/m8e-FF8MsqU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
}


@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

注意：我将 iframe 放在 if 中仅用于测试目的，它也可以在没有 if.

的情况下运行

Answer 2

感谢 Dani，我确认通常这在 blazor 中确实有效，但是在我的特定情况下，问题是我使用的是 单引号 而不是 双引号。更改代码使其工作。不确定这是 blazor 中的错误还是 iframe 的 chrome 或预期的功能。如果有人知道这方面的信息，我很乐意知道原因。

此外，我发现此行为的另一个原因是在嵌入页面的 url 中使用 HTTP 而不是 HTTPS。它在 PHP 中工作正常，即使对于 youtube，但在 blazor 中似乎不起作用。

<iframe width="480" height="270" src="https://www.youtube.com/embed/@video" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Answer 3

我使用了 https（http 不起作用）。

如何在 Blazor 中正确嵌入 <iframe>？（YouTube）

How do I correctly embed an <iframe> in Blazor? (Youtube)

c#

blazor

blazor-server-side

如何在 Blazor 中正确嵌入 <iframe>？ （YouTube）

How do I correctly embed an <iframe> in Blazor? (Youtube)

c#

blazor

blazor-server-side

如何在 Blazor 中正确嵌入 <iframe>？（YouTube）