Show YouTube video content in the tinyMCE 'Insert/Edit Media' in edit mode


I am having a YouTube Content Provider on my site. Thus, youtube videos are saved as MediaData.

When using the TinyMCE in Episerver CMS edit mode, there is an option to 'Insert/Edit Media'.

When clicked on that, we could browse the content we need to add. However, I can only see the images and files.

Any way to add the YouTube videos to the 'Select content' dialog box in the 'Insert/Edit Media' ?

Additional information: EPiServer.CMS.Core version=11.11.0

Edited, Jun 03, 2019 11:25


As you mentioned that your videos are stored in the episerver media so could you tell me the extension of those videos like "MP4/WMV/WEBM/FLV" etc.

It might be possible that you videos extension is not supported by Episerver or not added as allowed media type.



Jun 10, 2019 9:50

I think the typical way is to have a normal content block doing the rendering of the type set by your provider. And possibly have different renderings for ContentArea or TinyMCE (drag&)drop.

Jun 10, 2019 10:24

Yes, To render the YouTube videos you can prefer @Johan approach but for get them using "Insert/Edit Media" need to figure out what the media type of those videos.

Jun 10, 2019 11:06

@Ravindra, The YouTube video is a YouTubePlaylistItem and it is inherited from YouTubeVideo.cs which is MediaData. It does not have a specific media extension.

@Johan, This YouTube video has a view (VideoBlock.ascx) and a code behind file (VideoBlock.ascx.cs). Which is created as a block (But not a block ?!) using ContentControlBase<YouTubeVideo>.
This view (VideoBlock.ascx) will be displayed in the page view when we drag & drop the YouTubePlaylistItem to a ContentArea from the CMS gadget (See the screenshot below), But not when drag & drop to the TinyMCE editor (It just generates a link to the video thumbnail).
Is there a way we could add this into the 'Select content' in TinyMCE ? or Drag & Drop support?

And need to mention that the YouTube content is in root (See the screenshot below).

Edited, Jun 12, 2019 7:08

Update: Altered the YouTubeInitializer to include the YouTube content inside the GlobalAssetRoot instead of RootPage. Thus, it is displayed in the 'Select content' in TinyMCE. But it also gets the thumbnail url (See the screenshot below),

Jun 12, 2019 8:40
Kennethgry - Mar 22, 2021 9:09
I use a great [url=]way[/url] for a very long time, it allows you to download videos from YouTube.Faced with the problem of downloading videos in MP3 in good quality and here is the solution to the problem so I use this software exclusively.


Follow these steps that might help you to see the video in TinyMCE (I guess you are using MVC pattern)

1. Add a Page Partial View named YouTubeVideo.cshtml (MVC Razor) in ~\Views\Shared folder.

2. Add your markup to render the video into that file (for example see below sample code)

@using EPiServer.Web.Mvc.Html
@model EPiServer.Sample.YouTubeProvider.Models.YouTubeVideo
    var src = $"{Model.VideoId}";
<iframe width="420" height="315" src="@src"></iframe> 

Now (build and run the site of course ) try drag and drop your youtube video into TinyMCE property.

See if that work and let me know if you have any questions.



Edited, Jun 14, 2019 8:41

Hi Pratful J.
Thanks a lot for your answer. However, we are using ASP.NET Web Forms.

Jun 14, 2019 8:45

Oh, I am not much familiar with ASP.Net Web Form. But if you have old Episerver learning documetation then you can search for something with title like "Creating a template view for image files". That will help you for sure.

Jun 14, 2019 10:22

I advise you to watch Zombieland.Unlike other zombie movies you don't watch it with tension it's a very light and fun movie.

Mar 22, 2021 9:11

very helpfull

Apr 28, 2021 13:15
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.