Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Benjamin Stengaard 27 posts 141 karma points
    Apr 28, 2020 @ 13:35
    Benjamin Stengaard
    0

    How to edit the default youtube embed provider ?

    I need to change the default youtube embed provider markup, does anyone know how to do it?

  • Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib
    Apr 28, 2020 @ 16:19
    Alex Skrypnyk
    0

    Hi Benjamin,

    To edit where? Where do you want to edit youtube embed markup?

    Thanks,

    Alex

  • Benjamin Stengaard 27 posts 141 karma points
    Apr 28, 2020 @ 16:39
    Benjamin Stengaard
    0

    In the RTE there are an embed option, where one can add a YouTube link to embed the video in to the text, I need to be able to edit the embedded iframe. It’s not an option for the client to “just” edit the code using source code editor..

  • Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib
    Apr 28, 2020 @ 16:43
  • Benjamin Stengaard 27 posts 141 karma points
    Apr 28, 2020 @ 16:52
    Benjamin Stengaard
    0

    Yes I have seen that, but there’s already one for YouTube. So I thought there would be a way to adjust the attributes just for the iframe. If I’m going to recreate the provider, is there a way to know the exact current setup and are they not going to collide?

  • Nik 1617 posts 7263 karma points MVP 7x c-trib
    Apr 28, 2020 @ 17:33
    Nik
    102

    I've not done it myself, but you could probably create an Embed Provider that inherits from the core YouTube one and then override theGetMarkup method. Then in the composition, you could remove the core YouTube provider and register your own.

    This would mean that your's is essential the core one, just with one method overridden, in turn meaning it should "just work" and there should be no conflict.

    As I say, not tried it, but should be possible.

    Nik

  • Benjamin Stengaard 27 posts 141 karma points
    May 06, 2020 @ 07:24
    Benjamin Stengaard
    1

    The proposed solution is feasible, however, with the problem that the output of the oEmbed result by design is not easy to change, since you receive the full iframe and not just the values.

  • Vanlop Incham 4 posts 24 karma points
    May 09, 2022 @ 15:52
    Vanlop Incham
    0

    I add new code like as below: (I adds azure video as well, you can delete it, if not use)

    1 . I add New file under /App_Code, file name AzureComposing.cs or somewhere that project see them.

    using Umbraco.Core.Composing;
    using Umbraco.Web;
    using Umbraco8.EmbedProviders;
    
    namespace Umbraco8.Composing
    {
        public class RegisterEmbedProvidersComposer : IUserComposer
        {
            public void Compose(Composition composition) {
                composition.OEmbedProviders().Append<AzureVideoEmbedProvider>();
                composition.OEmbedProviders().Remove<Umbraco.Web.Media.EmbedProviders.YouTube>();
                composition.OEmbedProviders().Append<YouTubeNewEmbedProvider>();
            }
        }
    }
    

    2 . New file AzureEmbedProviders.cs, you can do as azure template, if you know all the syntax for youtube embedded video. I've tried it. But, it quite need more code to create data in embedded and iframe tag--not symmetric. And I need only add tag data-name="YSC" to iframe tag. Then, I decided to call base class and modified it as I need, not create all whole tag!!, code as below:

    using System;
    using System.Collections.Generic;
    using System.Web;
    using Umbraco.Web.Media.EmbedProviders;
    
    namespace Umbraco8.EmbedProviders
    {
        public class AzureVideoEmbedProvider : EmbedProviderBase
        {
            // no ApiEndpoint!
            public override string ApiEndpoint => String.Empty;
            public override string[] UrlSchemeRegex => new string[]
            {
                @"azure\.net/*"
            };
            public override Dictionary<string, 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}\" name=\"azuremediaplayer\" scrolling=\"no\" frameborder=\"no\" align=\"center\" autoplay=\"false\" width=\"{1}\" height=\"{2}\" allowfullscreen></iframe></div>";
                var videoPlayerMarkup = string.Format(videoFormat, HttpUtility.UrlEncode(url), maxWidth, maxHeight);
                return videoPlayerMarkup;
            }
        }
    
        public class YouTubeNewEmbedProvider : Umbraco.Web.Media.EmbedProviders.YouTube
        {
            public override string GetMarkup(string url, int maxWidth = 0, int maxHeight = 0)
            {
               //<div class="mceNonEditable embeditem" data-embed-url="https://www.youtube.com/watch?v=TSk6-Mg8ZyI" data-embed-height="240" data-embed-width="360" data-embed-constrain="true"><iframe width="360" height="203" src="https://www.youtube.com/embed/TSk6-Mg8ZyI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
               //https://www.youtube.com/watch?v=TSk6-Mg8ZyI  is URL1 and           
               //https://www.youtube.com/embed/TSk6-Mg8ZyI?feature=oembed is URL2
               //string url2 = url1...;   process to make an url2 string
               //string videoFormat = "<div class=\"mceNonEditable embeditem\" data-embed-url=\"{0}\" data-embed-width=\"{1}\" data-embed-height=\"{2}\" data-embed-constrain=\"true\"><iframe data-name=\"YSC\" width=\"{1}}\" height=\"{2}\" src=\"{3}\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"></iframe></div>";
               //var videoPlayerMarkup = string.Format(videoFormat, HttpUtility.UrlEncode(url), maxWidth, maxHeight,HttpUtility.UrlEncode(url2));
               //return videoFormat;
    
               string orgtag = base.GetMarkup(url,maxWidth,maxHeight);
               string newtag = orgtag.Replace("iframe ","iframe data-name=\"YSC\" ");
               return newtag;
            }
        }
    
    }
    

    Now, I can use RTE to insert azure video and youtube video with adding supplementary tag in iframe.

    :D

Please Sign in or register to post replies

Write your reply to:

Draft