Simply copy a YouTube URL and paste it into your editor. You will see a placeholder of the video show up in your editor. This placeholder image is not playable directly inside the editor, however you can play the video when you preview the post.
What’s inside the editor is an oEmbed tag. From the oEmbed's website
oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.
To show the actual video, what I did was I parsed the oembed tag and swapped it out with the YouTube’s own embed code. And to keep it simple I wrote the parser on the server side, take a look at the
OembedParser.cs for more details.
Secondly, YouTube has a few different URL formats, most commonly are the following three.
I did run into one edge case on an URL with the v param that did not start in the normal order, like this
In this one case the editor didn’t like it, but for vast majority of the scenarios you are covered.
I wrote some unit tests for my OembedParser that shows you the parsing of the different URL formats, you can check out
OembedParserTest.cs for more info.
Also if you take a look at the CKEditor’s documentation, you will see that it supports a variety of media embeds like a tweet, google map etc., but for this release I only support YouTube and Vimeo videos and will support others down the road.
For other things I did for this release check out the milestone. Thank you!