How To Embed A Youtube Video Into Deviantart

Embed Providers

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

For instance, a YouTube Video...

Information technology is the job of an 'Embed Provider', to accept the pasted Url, and to write out the advisable embed markup for the relevant tertiary party provider associated with the Url.

Embed Provider Configuration

Embed Providers are registered with the EmbedProvidersCollection during Composition when Umbraco boots.

The list of available default Embed Providers in an Umbraco install are as follows:

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

You can meet the details of these, and any recent editions in the C# programmer reference for Umbraco.Spider web.Media.EmbedProviders.

Configuring a new provider

Create a new provider by creating a C# class that implements the IEmbedProvider interface. Umbraco provides a convenient EmbedProviderBase class as a starting point.

            namespace            Umbraco.Cms.Core.Media.EmbedProviders            {            public            abstract            course            EmbedProviderBase            : IEmbedProvider     {            protected            EmbedProviderBase(IJsonSerializer jsonSerializer);            public            abstruse            string            ApiEndpoint {            get; }            public            abstruse            string[] UrlSchemeRegex {            get; }            public            abstract            Dictionary<cord,            cord> RequestParams {            get; }            public            abstract            cord            GetMarkup(string            url,            int            maxWidth            =            0,            int            maxHeight =            0);            public            virtual            string            GetEmbedProviderUrl(cord            url,            int            maxWidth,            int            maxHeight);            public            virtual            string            DownloadResponse(string            url);            public            virtual            T GetJsonResponse<T>(string            url)            where            T :            class;            public            virtual            XmlDocument GetXmlResponse(string            url);            public            virtual            string            GetXmlProperty(XmlDocument doc,            cord            holding);     } }          

If the provider to add supports the OEmbed format for embedding a representation of a Url in a website, and then brand use of the EmbedProviderBase base methods to implement the asking:

            public            override            string            GetMarkup(cord            url,            int            maxWidth            =            0,            int            maxHeight =            0)         {            var            requestUrl =            base of operations.GetEmbedProviderUrl(url, maxWidth, maxHeight);            var            oembed =            base.GetJsonResponse<OEmbedResponse>(requestUrl);            return            oembed.GetHtml();         }          

Adding a new OEmbed Provider Example

Let's let our editors to embed artwork from the popular DeviantArt website - the world's largest online social customs for artists and art enthusiasts. Nosotros can see they accept information on using OEmbed: https://world wide web.deviantart.com/developers/oembed. The format of their OEmbed implementation returns a JSON format, from a url https://backend.deviantart.com/oembed?url=[urltoembed]. We'll demand to apply the EmbedProviderBase and the base.GetJsonResponse method. We can see 'links' to media shared on DeviantArt are in the format: https://fav.me/[uniquemediaidentifier] so we'll need a regex to match any urls pasted into the embed panel that outset with fav.me, accomplished by setting the UrlSchemeRegex property.

The Provider would look like this:

            using            System.Collections.Generic;            using            Umbraco.Cms.Cadre.Media.EmbedProviders;            using            Umbraco.Cms.Core.Serialization;            namespace            MyNamespace            {            public            class            DeviantArtEmbedProvider            : EmbedProviderBase     {            public            DeviantArtEmbedProvider(IJsonSerializer jsonSerializer)           :            base(jsonSerializer)         {         }            public            override            cord            ApiEndpoint =>            "https://backend.deviantart.com/oembed?url=";            public            override            string[] UrlSchemeRegex =>            new            string[]         {            @"fav\.me/*",            @"\w+\.deviantart.com\/\w+\/art\/*",            @"\due west+\.deviantart.com\/art\/*",            @"sta\.sh/*",            @"\w+\.deviantart.com\/\due west+#\/d*",         };            public            override            Dictionary<cord,            string> RequestParams =>            new            Dictionary<string,            string>();            public            override            string            GetMarkup(string            url,            int            maxWidth            =            0,            int            maxHeight =            0)         {            var            requestUrl =            base of operations.GetEmbedProviderUrl(url, maxWidth, maxHeight);            var            oembed =            base.GetJsonResponse<OEmbedResponse>(requestUrl);            return            oembed.GetHtml();         }     } }          

Register the provider with the OEmbedProvidersCollection

Create a new C# class that implements IUserComposer and add together append your new provider to the EmbedProvidersCollection:

            using            Umbraco.Cms.Core.Composing;            using            Umbraco.Cms.Cadre.DependencyInjection;            namespace            MyNamespace            {            public            class            RegisterEmbedProvidersComposer            : IUserComposer     {            public            void            Compose(IUmbracoBuilder builder)             => architect.OEmbedProviders().Append<DeviantArtEmbedProvider>();     } }          

The new provider should be available for editors to apply:

Discover there isn't really any implementation written here - the regex maps the incoming url to the provider, and the base methods handle the complexity of requesting from the third party api, and turning the response into html.

Custom Embed Providers

If your third-party media provider does not support OEmbed or there is some quirk with the content beingness embedded that requires custom html. so implement GetMarkup without using the base helper methods.

Custom Embed Provider Instance

Azure Media Services (https://azure.microsoft.com/en-gb/services/media-services/) provide 'circulate-quality' video streaming services. You lot can embed the Azure Media Role player into your site to play a video using an IFrame.

This example creates a custom Embed Provider to do the chore of taking the Url of the Media asset and writing out the markup required to embed the IFrame video player inside your content.

            using            System.Collections.Generic;            using            System.Cyberspace;            using            Umbraco.Cms.Cadre.Media.EmbedProviders;            using            Umbraco.Cms.Cadre.Serialization;            namespace            MyNamespace            {            public            class            AzureVideoEmbedProvider            : EmbedProviderBase     {            public            AzureVideoEmbedProvider(IJsonSerializer jsonSerializer)           :            base of operations(jsonSerializer)         {         }            // no ApiEndpoint!            public            override            string            ApiEndpoint =>            string.Empty;            public            override            cord[] UrlSchemeRegex =>            new            string[]         {            @"windows\.net/*"            };            public            override            Lexicon<cord,            string> RequestParams =>            new            Dictionary<string,            string>();            public            override            string            GetMarkup(string            url,            int            maxWidth,            int            maxHeight)         {            // format of markup            string            videoFormat =            "<div class=\"iplayer-container\"><iframe src=\"//aka.ms/ampembed?url={0}\" proper noun=\"azuremediaplayer\" scrolling=\"no\" frameborder=\"no\" align=\"heart\" autoplay=\"fake\" width=\"{1}\" meridian=\"{two}\" allowfullscreen></iframe></div>";            // pass in encoded Url, with and height, and turn off autoplay...            var            videoPlayerMarkup =            string.Format(videoFormat, WebUtility.UrlEncode(url) +            "&amp;autoplay=simulated", maxWidth, maxHeight);            return            videoPlayerMarkup;         }     } }          

Here the markup to embed has been manually constructed based upon the iframe video player, no request to an Api endpoint is made...

Annals the Azure Embed Provider with the OEmbedProvidersCollection

Create a new C# class that implements IUserComposer and add append your new provider to the EmbedProvidersCollection:

            using            Umbraco.Cms.Core.Composing;            using            Umbraco.Cms.Core.DependencyInjection;            namespace            MyNamespace            {            public            class            RegisterEmbedProvidersComposer            : IUserComposer     {            public            void            Etch(IUmbracoBuilder builder)             => architect.OEmbedProviders().Append<AzureVideoEmbedProvider>();     } }          

Now editors can embed Azure Media video Urls in the format: //amssamples.streaming.mediaservices.windows.net/3b970ae0-39d5-44bd-b3a3-3136143d6435/AzureMediaServicesPromo.ism/manifest.

Source: https://our.umbraco.com/documentation/extending/Embedded-Media-Provider/

Posted by: robinsonlitaltalat.blogspot.com

Share this post