DEV Community 👩‍💻👨‍💻

Cover image for A Flexible Umbraco Embed Provider for url to iframe stuff
Tim Geyssens
Tim Geyssens

Posted on

A Flexible Umbraco Embed Provider for url to iframe stuff

A feature that I introduced in Umbraco way back in 2012 (damn I'm getting old) is an easy way to embed third party media by simply providing the url. Behind the scenes that takes advantage of the oembed format but of course not all sites that offer embeddable content have an api endpoint ... sometimes it's also just going from url to an iframe without extra stuff... but you still want to give editors the easy "url only" way of embedding.

So for a recent project I extended the default Umbraco behaviour with a fresh Embed Provider

    public class UrlToIframeEmbedProvider: EmbedProviderBase
    {
        // no ApiEndpoint!
        public override string ApiEndpoint => String.Empty;
        public override string[] UrlSchemeRegex
        {
            get
            {
                var urls = new List<string>();
                var doc = new XmlDocument();
                doc.Load(System.Web.Hosting.HostingEnvironment.MapPath("~/config/UrlToIframeEmbedProvider.xml"));

                if (doc != null)
                {
                    foreach(XmlNode node in doc.SelectNodes("//embed"))
                    {
                        urls.Add(node.Attributes["regex"].Value);
                    }
                }

                return urls.ToArray();
            }

        }

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

        public override string GetMarkup(string url, int maxWidth, int maxHeight)
        {
            var markup = string.Empty;
            var doc = new XmlDocument();
            doc.Load(System.Web.Hosting.HostingEnvironment.MapPath("~/config/UrlToIframeEmbedProvider.xml"));

            if (doc != null)
            {
                foreach (XmlNode node in doc.SelectNodes("//embed"))
                {
                    var m = Regex.Match(url, node.Attributes["regex"].Value, RegexOptions.IgnoreCase);
                    if (m.Success)
                    {
                        markup = node.InnerText;
                        break;
                    }
                }
            }

            if (!string.IsNullOrEmpty(markup))
            {
                return string.Format(markup, url, maxWidth,maxHeight);
            }else
            {
                return markup;
            }
        }
    }
Enter fullscreen mode Exit fullscreen mode

You can now simply populate the config file with different url regexes and the embed codes using the string.format placeholders

{0}: the url
{1}: the width
{2}: the height

<?xml version="1.0" encoding="utf-8" ?>
<customEmbeds>
  <embed regex="site\.com/*">
    <![CDATA[<iframe width="{1}" height="{2}" style="width: {1}px; height: {2}px; border: none; overflow: hidden;"
        src="{0}" webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true"
        frameborder="0" scrolling="no" allowtransparency="true" ></iframe>  ]]>
  </embed>
</customEmbeds>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. 👀

Join the Hackathon <-