4

On sites which support YouTube embedding, YouTube video URLs aren't displayed as embedded videos in the markdown preview.

The only way to know if a YouTube video will be embedded is by posting in a site-specific formatting sandbox, or by creating a dedicated meta discussion.

For sites that support embedded videos, can YouTube videos be displayed in the markdown preview?

Markdown preview for YouTube videos

1

I suspect the major issue preventing this (besides a general lack of round tuits among SE devs) is the difficulty of making such a preview efficient.

Writing a Markdown converter hook that emulates the server-side YouTube link parsing is actually pretty simple, but it turns out that actually adding such a hook to the editor makes the preview slow as molasses.

The problem is that the SE Markdown converter re-parses the whole post into HTML every time it changes, and injects the resulting HTML into the preview pane. As a result, the browser then has to reparse and re-render that HTML every time the preview is updated.

Since modern browsers are pretty damn fast at rendering simple HTML, this is usually not a big problem. But as soon as you add some slow post-processing pass (like, say, MathJax rendering) to the mix, it becomes one. And it turns out that initializing the embedded YouTube player is even slower than MathJax.

The code syntax highlighter plugin on SO gets around this issue by only running when it detects that the user has stopped typing for a couple of seconds. I suspect something similar might work here; we could have the Markdown preview hook just inject a bunch of empty placeholders for the embedded videos (so that the layout won't change when the actual video is loaded) and have it load the actual video player into the placeholder only after a suitable delay.

A proper fix to issues like this would be to rewrite the Markdown preview code to implement some kind of a React-style partial update mechanism, where only the parts of the preview HTML that actually change between updates are parsed and injected into the DOM. But that would be a non-trivial exercise in itself.


Update: Since version 1.50, my Stack Overflow Unofficial Patch (SOUP) user script now includes an implementation of a client-side previewer for YouTube videos.

The code is somewhat complicated because it tries pretty hard not to slow down normal editing by constantly reloading the YouTube player. Specifically, it replaces any matching YouTube video links with simple placeholders, which get replaced by actual videos after the post has not been edited for 5 seconds. It also chains the iframe loading via onload callbacks to ensure that, if the post being edited contains multiple embedded videos, they will be loaded one at a time rather than all at once.

Still, it seems to work. I can't guarantee that it will behave exactly the same as the server-side code,* since I haven't actually seen that code, but based on my testing it does get pretty close.

*) In fact, I know it doesn't, since it deliberately rejects some malformed YouTube video URLs that the server-side code will (or at least used to) happily accept. But I would consider that a bug in the server-side implementation.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .