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

Vote:
 

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

#204453
Edited, Jun 03, 2019 11:28
Vote:
 

Hi,

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.

Thanks

Ravindra

#204568
Jun 10, 2019 9:50
Vote:
 

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.

#204574
Jun 10, 2019 10:24
Vote:
 

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.

#204582
Jun 10, 2019 11:06
Vote:
 

@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).

#204634
Edited, Jun 12, 2019 10:28
Vote:
 

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),

#204635
Jun 12, 2019 8:40
Vote:
 

Hi,

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 = $"https://www.youtube.com/embed/{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.

Thanks

Praful

#204730
Edited, Jun 14, 2019 8:42
Vote:
 

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

#204731
Jun 14, 2019 8:45
Vote:
 

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.

#204735
Jun 14, 2019 10:22