Menu
A standard youtube embedded video using an <iframe> container on my Blazor page doesn't load correctly. Nothing is loaded.
<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>
In my page the link is actually linked with a @video link as such, but the result is the same.
<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>
Looking at the source, a mostly empty <html> structure is built under #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>
While in a normal HTML page the structure is filled with the content from Youtube. (Shortened)
<!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;}
How do I correctly embed an so that it works as intended in Blazor?
509
I have tested YT iframe and it runs on both blazorserver and blazorwasm (Net Core 3 preview 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++;
}
}
Notice: I put iframe inside an if only for tests purposes, it runs also without the if.
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
