How to create an Embed Provider for Omny Studio

This is a very short post to show how to add a new Embed Provider to Umbraco which works with Omny Studio.

The Rich Text Editor in Umbraco has an 'Embed' button, that when pressed, slides open a panel to enable editors to paste the Url of a third-party media resource to embed in content.

It is the job of an 'Embed Provider', to accept the pasted Url, and to write out the appropriate embed markup for the relevant third party provider associated with the Url.

By default this supports:

  • YouTube
  • Instagram
  • Twitter
  • Vimeo
  • Dailymotion
  • Flickr
  • SlideShare
  • Kickstarter
  • Getty Images
  • Ted
  • SoundCloud
  • Issuu
  • Hulu

You may need to support another provider, this can be easily done, in the case of this post we extend it to support Omny Studio.

First you need to create the Embed Provider, the following code achieves this:

using System.Collections.Generic;
using Umbraco.Web.Media.EmbedProviders;

    public class OmnyEmbedProvider : EmbedProviderBase
    {
        public override string ApiEndpoint => "https://omny.fm/oembed";

        public override string[] UrlSchemeRegex => new string[]
        {
            @"omny\.fm/shows/*"
        };

        public override Dictionary<string, string> RequestParams => new Dictionary<string, string>();

        public override string GetMarkup(string url, int maxWidth = 0, int maxHeight = 0)
        {
            var requestUrl = base.GetEmbedProviderUrl(url, maxWidth, maxHeight);
            var oembed = base.GetJsonResponse(requestUrl);

            return oembed.GetHtml();
        }
    }

Next you will need to register the new provider, the following code achieves this:

using Umbraco.Core.Composing;
using Umbraco.Web;
    public class RegisterEmbedProvidersComposer : IUserComposer
    {
        public void Compose(Composition composition)
        {
            composition.OEmbedProviders().Append();
        }
    }

That's all there is to it... Pretty simple!

Comments (0)