Embed Youtube Videos in Umbraco RTE
# help-with-umbraco
o
Has anyone found a way to embed videos from YouTube with the nocookie option when using the Embed button in the TinyMCE editor? e.g. If I paste "https://www.youtube-nocookie.com/embed/dug56u8NN7g" in to the Url field, I get "not supported" message. Is there a way to embed the nocookie.com youtube url this way?
h
IIRC, I created a macro to do it
o
I was thinking something along those lines too, maybe a new nested content block or ye, a new macro. Ok. Thanks @huwred 🙂
m
Custom oembed provider that just proxies the YouTube one should work as well
s
youtube-nocookie is probably not in our current oEmbed provider, a custom one like Matt says, with a copy of ours and some adjusting should work.
a
@Owain just out of curiosity, why are you allowing editors to insert this in the RTE? Eg. opposed to a YouTube grid control or block element? You may have perfect valid reasons for doing so, so just asking to better understand 😉
o
@Anders Bjerner - erm, no idea. We don't tend to on our newer sites but this one has been around for a long time and I think they have probably just always done it that way 🙂
a
Ah - makes sense if it is an older site 😉
o
So I've gone down the route of a custom Provider but can't seem to get it to work. Edited the
EmbeddedMedia.config
to have this :
Copy code
<!-- YouTube No Cookies Settings-->
    <provider name="YouTubeNoCookies" type="Umbraco.Web.Media.EmbedProviders.YouTubeNoCookiesEmbed, umbraco">
        <urlShemeRegex><![CDATA[https:\/\/www\.youtube-nocookie\.com\/embed\/([a-zA-Z0-9-_]+)]]></urlShemeRegex>
    </provider>
and then I have a new class that looks like this :
Copy code
namespace Our.Umbraco.Media.EmbedProviders
{
    public class YouTubeNoCookiesEmbed : AbstractProvider
    {
        public override bool SupportsDimensions
        {
            get { return false; }
        }
        public override string GetMarkup(string url, int maxWidth, int maxHeight)
        {
            // format of markup
            string videoFormat = "<div class=\"iplayer-container\">" +
                "<iframe src=\"//https:///www.youtube-nocookie.com/embed={0}\">" +
                "</iframe>" +
                "</div>";
            // pass in encoded Url, with and height, and turn off autoplay...
            var videoPlayerMarkup = string.Format(videoFormat, HttpUtility.UrlEncode(url) + "&autoplay=false", maxWidth, maxHeight);
            return videoPlayerMarkup;
        }

    }
}
But the Get Markup method is never hit when I put a breakpoint in and when I add the embed url I get an error saying not supported or url not valid.
I tried changing the base class to
OEmbedVideo
but that didn't work either
s
type="Umbraco.Web.Media.EmbedProviders.YouTubeNoCookiesEmbed, umbraco"
your namespace is
Our.Umbraco.Media.EmbedProviders
and your dll name is not
umbraco.dll
So it will be
type="Our.Umbraco.Media.EmbedProviders, MyProjectLib.dll"
o
totally missed the namespace not matching! Even with your suggested changes though, I still can't embed a no-cookie url 😦
s
regex looks wrong as well
embed\/
should probably be
embed=
also
"<iframe src=\"//https:///
has one to many slashes FYI - also not sure why it starts with // before the https?
And my mistake:
type="Our.Umbraco.Media.EmbedProviders, MyProjectLib.dll"
should not include
.dll
d
Just be aware that not setting cookies on initial visit doesn't mean YouTube is still violating privacy laws - it just does it in a different way. So the no-cookie embed is not really GDPR compliant. https://axbom.com/embed-youtube-videos-without-cookies/
o
Interesting - maybe this is my get out clause as I still can't get this to work 😄
Been trying to use this example : https://our.umbraco.com/Documentation/Extending/Embedded-Media-Provider/index-v7#custom-embedded-media-provider-example With this url :

https://www.youtube.com/watch?v=jNYR1ioecJYâ–¾

Zero luck so far. Even asked ChatGPT to help 😄
h
@Owain are you doing this for v7 or v8?
I think this is perhaps because Umbraco is using the built in providor for www.youtube.com urls so never hits your provider.
s
No that one only looks for
Copy code
"youtu.be/.*",
"youtube.com/watch.*"
h
This works in v8 for https://www.youtube-nocookie.com/embed=jNYR1ioecJY
Copy code
public class NoCookieEmbedProvider : EmbedProviderBase
        {
            //https://www.youtube-nocookie.com/embed=jNYR1ioecJY
            public override string ApiEndpoint => String.Empty;

            public override string[] UrlSchemeRegex => new string[]
            {
                @"youtube-nocookie\.com/*"
            };

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

            public override string GetMarkup(string url, int maxWidth = 0, int maxHeight = 0)
            {
                string videoFormat = "<div class=\"iplayer-container\"><iframe src=\"{0}\" name=\"youtubemediaplayer\" scrolling=\"no\" frameborder=\"no\" align=\"center\" autoplay=\"false\" width=\"{1}\" height=\"{2}\" allowfullscreen></iframe></div>";
                // pass in encoded Url, with and height, and turn off autoplay...
                var videoPlayerMarkup = string.Format(videoFormat, HttpUtility.HtmlEncode(url) , maxWidth, maxHeight);
                return videoPlayerMarkup;
            }
        }

        public class RegisterEmbedProvidersComposer : IUserComposer
        {
            public void Compose(Composition composition) {
                composition.OEmbedProviders().Append<NoCookieEmbedProvider>();
            }
        }
o
Finally got it working via a DM 😄 Thanks everyone who helped out.
Copy code
using System.Web;
using Umbraco.Web.Media.EmbedProviders;

namespace Our.Umbraco.Media.EmbedProviders
{
    public class YouTubeNoCookiesEmbed : AbstractProvider
    {
        public override bool SupportsDimensions
        {
            get { return true; }
        }
        public override string GetMarkup(string url, int maxWidth, int maxHeight)
        {
            // format of markup
            string videoFormat = "<iframe src=\"{0}\">" +
                "</iframe>";
            // pass in encoded Url, with and height, and turn off autoplay...
            var videoPlayerMarkup = string.Format(videoFormat, HttpUtility.HtmlEncode(url));
            return videoPlayerMarkup;
        }

    }
}
Provider -
Copy code
<provider name="YoutubeNoCookies" type="Our.Umbraco.Media.EmbedProviders.YouTubeNoCookiesEmbed, MyProjectName">
        <urlShemeRegex><![CDATA[youtube-nocookie.com/embed/([a-zA-Z0-9-_]+)]]></urlShemeRegex>
        <apiEndpoint><![CDATA[https://www.youtube.com/oembed]]></apiEndpoint>
        <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco">
            <param name="iframe">1</param>
            <param name="format">xml</param>
            <param name="scheme">https</param>
        </requestParams>
    </provider>
Going to do a blog too 😄
s
I'd prefer Huw's version, the mess in the web.config seems too difficult and not needed to me! 😅
m
EmbedProviderBase as a base - you could Replace("-nocookie") base.GetMarkUp() Replace("youtube", "youtube-nocookie")
s
Nice one so if they do paste a youtube url, it will use the no-cookie one
m
Yeah if you remove the normal one from the config and mess with the scheme regex
or composer magic ofc 🙂
s
Composer magic please 😉
m
.Remove I think it is 🙂
h
yes, something like composition.OEmbedProviders().Remove()
you could Replace("-nocookie") base.GetMarkUp() Replace("youtube", "youtube-nocookie") AFAIK you can't just do that

https://www.youtube.com/watch?v=jNYR1ioecJYâ–¾

is not the same as https://www.youtube-nocookie.com/embed=jNYR1ioecJY one works the other doesn't so can't just swap the url
m
just needs an extra bit of Replace adding 😄
h
it is the embed string that is different, the first link watch?v= works, but changing it to youtube-nocookie with the same string jNYR1ioecJY returns a 404
m
So Replace("watch?v=", "embed=") ?
h
no, the jNYR1ioecJY must get generated differently for the different url's as the second url doesn't work
m
how odd
h
yes, not what I expected TBH
mmm, weirdly both of these work ??

https://www.youtube.com/watch?v=dug56u8NN7gâ–¾

https://www.youtube-nocookie.com/embed=dug56u8NN7g
m
direct from the embed generation 🙂
h
DOh! it was me 🤣 should be embed/ not embed=
m
😄
h
This should work for all YouTube urls (replacing existing YouTube provider)
Copy code
cs
    public class YouTubeNoCookieEmbedProvider : EmbedProviderBase
    {
        //https://www.youtube-nocookie.com/embed/jNYR1ioecJY
        //https://www.youtube.com/watch?v=jNYR1ioecJY
        public override string ApiEndpoint => String.Empty;

        public override string[] UrlSchemeRegex => new string[]
        {
            "youtu.be/.*",
            "youtube.com/watch.*",
            "youtube-nocookie.com/embed/.*"
        };

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

        public override string GetMarkup(string url, int maxWidth = 0, int maxHeight = 0)
        {
            url = url.Replace(@"youtube", "youtube-nocookie")
                .Replace("watch?v=","embed/")
                .Replace("youtu.be/","www.youtube-nocookie.com/embed/");
            string videoFormat = "<div class=\"iplayer-container\"><iframe src=\"{0}\" name=\"youtubemediaplayer\" scrolling=\"no\" frameborder=\"no\" align=\"center\" autoplay=\"false\" width=\"{1}\" height=\"{2}\" allowfullscreen></iframe></div>";
            // pass in encoded Url, with and height
            var videoPlayerMarkup = string.Format(videoFormat, HttpUtility.HtmlEncode(url) , maxWidth, maxHeight);
            return videoPlayerMarkup;
        }
    }

    public class RegisterEmbedProvidersComposer : IUserComposer
    {
        public void Compose(Composition composition)
        {
            composition.OEmbedProviders().Remove<YouTube>();
            composition.OEmbedProviders().Append<YouTubeNoCookieEmbedProvider>();
        }
    }
o
Glad this has started a discussion 🙂 My solution was for Umbraco 7 but good to see other options for other versions. Unless I'm mistaken and these would all work on older versions too?
h
I think your way is probably the way to go for v7
s
until EOL
n
Just cos it's EOL doesn't mean we have to stop working on it ... we just get to charge a premium 😄 #ThereAreStillv4andV6SitesOutThere 😉
b
I think it is missing the
youtube.com/shorts/.*
format as well, e.g. https://youtube.com/shorts/jNYR1ioecJY
16 Views