Skip to main content
Client Center Buy
Menu

Insert a video button for an ASP.NET Core rich text editor

The Insert Video dialog over the editor

Sooner or later someone wants to put a video in an article. RichTextBox has an Insert Video button that embeds a YouTube link or an HTML5 video, and it is in the default, full and basic toolbars.

Add the button

If you use a preset toolbar, it is already there. In your own toolbar, its name is insertvideo:

<richtextbox name="Body"
             toolbar="{insertvideo}|{bold,italic}|{undo,redo}"
             height="350px"></richtextbox>

Linking or uploading

A video link, such as a YouTube address, costs you no storage, and the video service handles the streaming.

An uploaded file goes through your server like any other upload. By default the list of allowed files includes .mp4 and .mp3, but the 4 MB limit stops almost any real video. Raise it for those types only:

builder.Services.AddRichTextBox(options =>
{
    options.MaxUploadBytesByExtension[".mp4"] = 200 * 1024 * 1024;
});

Two other limits apply to a request that size. Kestrel limits a request body to about 30 MB by default, and so does IIS. Raise those deliberately, and only on the upload route if you can.

Embeds and your saved HTML

A video embed is an <iframe>, which is exactly the kind of thing a cleaner watches for. Saved HTML passes through the same rules as everything else: event handlers and srcdoc are removed. If you use [RichTextHtml], try your real video links before going live, so you know they survive the policy you chose.

A word about storage

Serving video from your own web server is expensive and uses a lot of bandwidth. For more than the occasional clip, put uploads in cloud storage, or use a video service and insert its link.

Read next