iframe Undo/Redo for execCommand using insertHTML (contenteditable)

Question

So, currently I am working on a small button that asks the user to type the link for a video and then I am taking that link and making it into an iframe and inserting it into a contenteditable using document.execCommand("insertHTML", false, "<iframe width='350' height='551' src='<video_link_entered_by_user>'></iframe>"). This works great and the video gets embedded into the contenteditable.

The only problem is that if I do Command+Z or press undo in Safari, the iframe won't get undone for some reason. It works in Firefox, Chrome, Edge, and Opera, but for some reason I think safari doesn't understand how to undo it.

Is there any workaround for this other than implementing my own undo/redo stack? I just want to be able to get rid of the iframe when the user chooses to undo in safari as well and add it back when the user chooses to redo. Please help and thanks in advance.

EDIT:

Here's a JS fiddle to demonstrate what I'm talking about. If you run this in any browser except Safari and press undo, it works. But not in Safari. http://jsfiddle.net/qg41pd3k/9/

Answer 1

I think it's not really supported in Safari. Checking at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand, the execCommand method returns true/false whether the command is supported/enabled or not. In Safari it always returns false (according to my tests).

I think the only workaround is implementing you own undo/redo stack.