The problem is, the generated JSON also includes the <script> tags that I used in my shortcodes.
For example, in my video shortcode, I have used Plyr.io as my video player and so, I’m initializing the player using (while the loadMedia function exists in my script that exists in my document’s <head>):
It’s also better for performance. If you have two players on a page, it would run loadMedia() twice. Putting it in a header template is much better.
You could improve on that procedure by doing the following:
surround your range (after range and before end) with a div or span that has a class is--player
add a script that does an each loop over .is--player and initializes them. in jQuery, this would be $('.is--player').loadMedia(); depending on how you scripted loadMedia.