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>

在我的页面中，链接实际上是通过@video链接链接的，但是结果是相同的。

<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>

从源头来看，在<html>下建立了一个几乎为空的#document结构。

<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

多亏了达妮，我确认通常这确实可以使人大开眼界，但是在我的具体情况下，问题是我使用的是单引号而不是双引号。更改代码可以使其正常工作。不确定这是否是iframe的blazor或chrome中的错误，或预期的功能。如果有人知道这件事，我很乐意知道为什么。

此外，我发现此行为的另一个原因是嵌入页面的网址中包含HTTP而不是HTTPS。即使在youtube上，它在PHP中也能正常工作，但似乎无法在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>

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

2 个答案:

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

2 个答案:

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