Limbo YouTube

Limbo.Umbraco.YouTube is a package for Umbraco that features a property editor for inserting (via URL or embed code) a YouTube video. The property editor saves a bit of information about the video, which then will be availble in C#.

The latest version (v13.x) supports Umbraco 13, whereas older releases support support Umbraco 10-12 (v2.x) and Umbraco 9 (v1.x).

License:	MIT License
Umbraco:	Umbraco 13
Target Framework:	.NET 8

Installation

Umbraco 13

The package targets Umbraco 13 and is available via NuGet. To install the package, you can use either .NET CLI:

dotnet add package Limbo.Umbraco.YouTube --version 13.0.0

or the NuGet package manager:

Install-Package Limbo.Umbraco.YouTube -Version 13.0.0

Other versions of Umbraco

v2/main (Umbraco 10-12)
v1/main (Umbraco 9)

Configuration

In order to access the YouTube API, the package needs to be configured with a set of Google credentials, which should be added in your appSettings.json file like this:

{
  "Limbo": {
    "YouTube": {
      "Credentials": [
        {
          "Key": "1f22f315-e208-4c5f-86c5-3793be89ba9c",
          "Name": "MyProject",
          "Description": "A description about the credentials.",
          "ApiKey": "Your server key here."
        }
      ]
    }
  }
}

Key should be a randomly generated GUID which will be used as a unique identifier for the credentials.

Name and Description are currently not used, but are meant to be shown in the UI to identify the credentials to the user.

ApiKey should be an API key obtained from the Google Cloud Platform You can create new apps/projects via the create project page. Once your project has been created, you can go to the credentials page to create an API key.

The API key let's this package access the YouTube API on behalf of your app/project.

Screenshots

Insert video by URL

Insert video by embed code

Examples

This package features a Limbo YouTube Video property editor that allows users to insert a YouTube video from either it's URL or embed code. Properties that are using this property editor then exposes an instance of YouTubeVideoValue (or null if the property is empty).

You can use the YouTubeValue instance like shown below:

@using Limbo.Umbraco.YouTube.Models.Videos

@inherits UmbracoViewPage

@{

    // Assuming video is created as a media, get a reference to that media
    IPublishedContent? media = Umbraco.Media(1178);

    if (media is null)
    {
        <pre>NOPE!</pre>
        return;
    }

    // Get the video value from the "video" property
    YouTubeVideoValue? video = media.Value<YouTubeVideoValue>("video");

    if (video is null)
    {
        <pre>NOPE!</pre>
        return;
    }

    // Ender the embed iframe
    @video.Embed.Html

    // Render the video ID
    <pre>@video.Details.Id</pre>

    // Render other video information
    <pre>@video.Details.Title</pre>
    <pre>@video.Details.Duration</pre>
    <pre>@video.Details.Description</pre>

    // Render largest available thumbnail
    YouTubeThumbnail? thumbnail = video.Details.Thumbnails.LastOrDefault();
    if (thumbnail is not null)
    {
        <img src="@thumbnail.Url" width="@thumbnail.Width" height="@thumbnail.Height" />
    }

}