Could be tricky, because non-textual elements would probably have to be taken care of individually. For example a video would probably have to show a video of its own representation in code.
I think it would be better to do a split panel so you could see the source and the end result side by side. This would eliminate the need for somehow showing the video and the source in the same place. You could even include the shadow DOM trees for a full explanation of how the browser renders complex tags like video.
for certain elements, a quinesque approach might not be that useful, but source could be displayed juxtaposed to results. (to show numbered lists, do you want to display the ol tags before the numbers (thus using fake numbers) or do you let ol numbering tags tag the elements with numbers and then show the source inside that?)
btw it really drives me crazy that browser implementors think that when I copy/paste a numbered list, I somehow don't want the numbers.
Similar to:
https://no-gravity.github.io/html-quine/index.html
Could be tricky, because non-textual elements would probably have to be taken care of individually. For example a video would probably have to show a video of its own representation in code.