Embeds

<ec-embed> renderer en URL via den første registrerede embed provider, der accepterer URL’en.

Pakken registrerer providers til YouTube, Vimeo og Vimeo .m3u8.

Brug

<ec-embed src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></ec-embed>

YouTube og almindelig Vimeo renderer som <iframe>.

<ec-embed src="https://vimeo.com/123456789" append-query="autoplay=1"></ec-embed>

append-query tilføjes til embed-URL’en.

Indbyggede providers

Provider	Matcher	Output
YouTubeEmbedProvider	youtu.be og youtube.com	<iframe src="https://www.youtube.com/embed/{id}">
VimeoEmbedProvider	vimeo.com/{id}	<iframe src="https://player.vimeo.com/video/{id}">
VimeoM3u8EmbedProvider	player.vimeo.com/external/{id}.m3u8	Partial Partials/EcEmbed/M3u8Embed

Hvis ingen provider matcher, renderer helperen kun en HTML-kommentar.

Custom provider

Brug ISimpleEmbedProvider, når outputtet kan være et enkelt tag med en URL-attribut.

public class MyVideoProvider : ISimpleEmbedProvider
{
    public bool RequiresFunctionalConsent => false;
    public bool RequiresMarketingConsent => true;
    public bool RequiresStatisticsConsent => false;

    public bool IsValid(string src) => src.Contains("video.example.com");
    public string Url(string src) => src.Replace("/watch/", "/embed/");
    public string TagName() => "iframe";
    public string AttributeName() => "src";
    public Dictionary<string, object> AppendedAttributes() => new();
}

Registrer provideren i en composer:

public class EmbedComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.EmbedProviders().Append<MyVideoProvider>();
    }
}

Brug IViewEmbedProvider, når embed skal renderes med et partial og en model.

Custom view provider

Brug IViewEmbedProvider, når embed-outputtet kræver mere markup end et enkelt tag.

using Ecreo.Essentials.Frontend.Embed;
using Microsoft.AspNetCore.Razor.TagHelpers;

public class ProductVideoEmbed
{
    public required string Url { get; init; }
    public string? Title { get; init; }
}

public class ProductVideoEmbedProvider : IViewEmbedProvider
{
    public bool RequiresFunctionalConsent => false;
    public bool RequiresMarketingConsent => true;
    public bool RequiresStatisticsConsent => false;

    public bool IsValid(string src)
    {
        return src.StartsWith("https://video.example.com/", StringComparison.OrdinalIgnoreCase);
    }

    public string? ViewName(string? url, string? appendQuery, TagHelperContext? context)
    {
        return "Partials/EcEmbed/ProductVideo";
    }

    public object? Model(string? url, string? appendQuery, TagHelperContext? context)
    {
        var embedUrl = appendQuery is null ? url : $"{url}?{appendQuery.TrimStart('?')}";

        return new ProductVideoEmbed
        {
            Url = embedUrl ?? string.Empty,
            Title = context?.AllAttributes["title"]?.Value?.ToString()
        };
    }
}

Registrer provideren i en composer:

public class ProductVideoEmbedComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.EmbedProviders().Append<ProductVideoEmbedProvider>();
    }
}

Opret viewet i /Views/Partials/EcEmbed/ProductVideo.cshtml:

@model ProductVideoEmbed

<figure class="video-embed">
    <video controls preload="metadata">
        <source src="@Model.Url" type="video/mp4">
    </video>

    @if (!string.IsNullOrWhiteSpace(Model.Title))
    {
        <figcaption>@Model.Title</figcaption>
    }
</figure>

Brug provideren via <ec-embed>:

<ec-embed src="https://video.example.com/demo.mp4" title="Produktdemo"></ec-embed>