Nibble

Embedding third party media in Umbraco

Since Umbraco v4.9 embedding third party media in the RTE has gotten a lot easier, it’ just a matter of supplying the Url to the video/image/sound/poll/… you want to add setting the size and hitting insert!

image

This is done by making use of the oembed format so every site that support the format can be supported by the dialog in a minute  (if it isn’t already) Smile

All this is setup in the new config file /config/EmbeddedMedia.config, for each supported third party site there is an entry in the config file

  <!-- Youtube Settings -->
  <provider name="Youtube" type="Umbraco.Web.Media.EmbedProviders.OEmbedVideo, umbraco">
    <urlShemeRegex><![CDATA[youtu(?:\.be|be\.com)/(?:(.*)v(/|=)|(.*/)?)([a-zA-Z0-9-_]+)]]></urlShemeRegex>
    <apiEndpoint><![CDATA[http://www.youtube.com/oembed]]></apiEndpoint>
    <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco">
      <param name="iframe">1</param>
      <param name="format">xml</param>
    </requestParams>
  </provider>

The provider that needs to be used (most of the time it’s oembed), a regex that will match the supported urls, the api endpount for the oembed stuff and some optional request params if needed.

So if a third party site supports oembed and isn’t supported by the insert third party media dialog yet it’s just a case if adding an entry to the config file

But the implementation isn’t fixed to oembed it’s also possible to plug in custom providers that don’t make use of the oembed format

Look at the following entry for twitgoo

  <!-- Twitgoo Settings , not an OEmbed one -->
  <provider name="Twitgoo" type="Umbraco.Web.Media.EmbedProviders.Twitgoo, umbraco">
    <urlShemeRegex><![CDATA[twitgoo\.com/]]></urlShemeRegex>
  </provider>

That makes use of a custom provider that looks like

using HtmlAgilityPack;
 
namespace Umbraco.Web.Media.EmbedProviders
{
    public class Twitgoo : AbstractProvider
    {
        public override bool SupportsDimensions
        {
            get
            {
                return false;
            }
        }
 
        public override string GetMarkup(string url, int maxWidth, int maxHeight)
        {
            var web = new HtmlWeb();
            var doc = web.Load(url);
 
            var img = doc.DocumentNode.SelectSingleNode("//img [@id = ‘fullsize’]").Attributes["src"];
 
            return string.Format("<img src=\"{0}\"/>",
               img.Value);
        }
    }
}

Which will basically search for the element with id full-size and return an image using the src attribute of the full-size element found.

So you can also write your own providers for sites you wish to support Smile

18 Comments so far

  1. Bjørn Fridal on October 24th, 2012

    Great Tim. Its really neat to see useful features like this directly in Umbraco. Even though several packages for this already exists, supporting Oembed out of the box, will be quite handy.

    Cheers
    Bjørn

  2. Voѕ post sont véritablement instructifs

  3. homepage on February 13th, 2014

    Superbe pote pߋur ne rien changer

  4. web site on February 13th, 2014

    Bon, je n’aі guère finі de lire cependant je passerai demain

  5. http://Storify.com on February 18th, 2014

    Οn peut dire que ce n’est nullemeոt incohérent …

  6. localiser iphone on February 21st, 2014

    Localiser iphone et faite vous plaisir

  7. localiser un iphone on February 21st, 2014

    Localiser un iphone, et trouvez votre amie!

  8. localisation portable on February 21st, 2014

    Localisation portable et trouver votre femme!!

  9. localiser un telephone on February 21st, 2014

    localiser un telephone et c est gagné!!

  10. localiser mon iphone on February 21st, 2014

    localiser mon iphone et pop let s go!!

  11. I love your blog.. very nice colors & theme. Did you design this website yourself or did you hire someone to do
    it for you? Plz answer back as I’m looking to create my own blog and would
    like to find out where u got this from. many thanks

    Also visit my webpage :: riot points gratuit, riotpointsgeneratorgratuit.blogspot.fr,

  12. Facebook Twitter Youtube Traffic For $5!

    Here is my blog post; Do A Book Cover Or Movie Poster For $5!

  13. thaï on March 18th, 2014

    Puis-jе voսs reprendre deuх ou trois phrases pour un blog
    personnel ?

  14. dévergondée racaille on March 23rd, 2014

    Eոcore un sublime article, j’en discuterai après avec mes potes

  15. minion rush cheats on May 6th, 2014

    The rule of each and every game hacking software program is precisely the same.
    The Warlock gets to be a free mouunt at level 20 after purchasing riding.
    Ourr Flappy Bird record stasnds at 19 pipes; we imagine a lot of people throw
    in the towel after hitting the initial few
    pipes.

  16. Ouida on June 7th, 2014

    It’s nearly impossible to find experienced people for this subject, but you sound like you know what
    you’re talking about! Thanks

    Look into my site: human stem cells markers (Ouida)

  17. If after your 1st month or even inside the first couple of months, if your not making any money, you will receive a
    full refund. You should leave questions and be open to suggestions.

    It would substantially greater and a lot easier to go following more
    distinct phrases, and even greater to had the place in them.

    Here is my web site :: référencement naturel google 2013

  18. Shoes on July 28th, 2014

    Hi there, just became alert to your blog through Google, and found that it is truly informative.

    I’m gonna watch out for brussels. I will bee grateful if
    you continue this in future. Many peoplpe will be benefited from your
    writing. Cheers!

Leave a Reply