Javascript string manipulation and innerHtml

Question

I have a javascript function that changes the innerHtml of a <div> tag to code that shows a video when you click on a link.

The problem is when the string that I use for html, it somehow gets messed up, and the video doesn't show, if I look in the developer tools to see what the code is that got put in, most of the quotes turned into question marks, and part of the code was missing?

Anyone know how to fix it?

This is the string that gets messed up: (its part of an embed code, but the other parts seems to be ok)

mid1 = ' flashvars="config={"play":{"replayLabel":"","opacity":1},"playlist":[{"url":"http://cdnimages.sorensonmedia.com/c0ffa574B6ccbP46b688a2c9f95914115bbf/7f3101ae-6f7a-11e1-a7d6-22000a1c0595/file-1.jpg","autoPlay":"true"},{"url":"2266d13a-62f8-11e1-9098-123139329b57","autoPlay":true, "fileVersionId":"222bb9b0-62f8-11e1-9098-123139329b57","captionUrl":""},{"url":"http://cdnimages.sorensonmedia.com/c0ffa574B6ccbP46b688a2c9f95914115bbf/7f3101ae-6f7a-11e1-a7d6-22000a1c0595/file-1.jpg","autoPlay":"true"}],"clip":{"provider":"rtmp","accelerated":false,"autoPlay":false,"fadeInSpeed":1000,"scaling":"fit","url":""},"canvas":{"backgroundColor":"#000000","backgroundGradient":"low"},"logo":{"left":15,"top":15,"opacity":1,"displayTime":4,"fullscreenOnly":false,"url":"","linkUrl":"","linkWindow":"_blank"},"plugins":{"rtmp":{"url":"http://static.cdn.360.sorensonmedia.com/1/flash/plugin.gm.rtmp-3.1.5.0.swf"},"sorenson360":{"apiPath":"http://360.sorensonmedia.com/api","url":"http://static.cdn.360.sorensonmedia.com/1/flash/plugin.gm.sorenson-3.2.2.0.swf"},"controls":{"apiPath":"http://360.sorensonmedia.com/api","url":"http://static.cdn.360.sorensonmedia.com/1/flash/flowplayer.controls-3.2.2.2.1.swf","autoHide":"never","hideDelay":4000,"borderRadius":0,"volumeSliderGradient":"none","bufferGradient":"none","tooltipTextColor":"#ffffff","progressColor":"#1e5576","bufferColor":"#020c13","progressGradient":"medium","backgroundColor":"#222222","sliderColor":"#000000","volumeSliderColor":"#000000","buttonColor":"#363636","durationColor":"#ffffff","timeColor":"#6F030A","sliderGradient":"none","buttonOverColor":"#728B94","backgroundGradient":"none","tooltipColor":"#5F747C","timeBgColor":"#363636","height":20,"opacity":1,"play":true,"scrubber":true,"volume":true,"stop":false,"mute":true,"time":true,"fullscreen":true,"playerStyle":"static","embed":false,"email":true,"width":"100pct","bottom":0,"playerSkin":2},"playListView":null},"playerId":"videoPlayer","screen":{"bottom":10},"onLoad":""}" ';

After if I copy the code, it's

<embed width="100%" height="100%" id="videoPlayer_api" src="http://static.cdn.360.sorensonmedia.com/1/flash/flowplayer-3.2.2.swf" type="application/x-shockwave-flash" style="outline-width: medium; outline-style: none; outline-color: invert;" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" quality="high" cachebusting="false" bgcolor="#000000" flowplayer.controls-3.2.2.2.1.swf?,?autoHide?:?never?,?hideDelay?:4000,?borderRadius?:0,?volumeSliderGradient?:?none?,?bufferGradient?:?none?,?tooltipTextColor?:?#ffffff?,?progressColor?:?#1e5576?,?bufferColor?:?#020c13?,?progressGradient?:?medium?,?backgroundColor?:?#222222?,?sliderColor?:?#000000?,?volumeSliderColor?:?#000000?,?buttonColor?:?#363636?,?durationColor?:?#ffffff?,?timeColor?:?#6F030A?,?sliderGradient?:?none?,?buttonOverColor?:?#728B94?,?backgroundGradient?:?none?,?tooltipColor?:?#5F747C?,?timeBgColor?:?#363636?,?height?:20,?opacity?:1,?play?:true,?scrubber?:true,?volume?:true,?stop?:false,?mute?:true,?time?:true,?fullscreen?:true,?playerStyle?:?static?,?embed?:false,?email?:true,?width?:?100pct?,?bottom?:0,?playerSkin?:2},?playListView?:null},?playerId?:?videoPlayer?,?screen?:{?bottom?:10},?onLoad?:??}?="" flash="" 1="" static.cdn.360.sorensonmedia.com="" api?,?url?:?http:="" 360.sorensonmedia.com="" plugin.gm.sorenson-3.2.2.0.swf?},?controls?:{?apiPath?:?http:="" plugin.gm.rtmp-3.1.5.0.swf?},?sorenson360?:{?apiPath?:?http:="" file-1.jpg?,?autoPlay?:?true?}],?clip?:{?provider?:?rtmp?,?accelerated?:false,?autoPlay?:false,?fadeInSpeed?:1000,?scaling?:?fit?,?url?:??},?canvas?:{?backgroundColor?:?#000000?,?backgroundGradient?:?low?},?logo?:{?left?:15,?top?:15,?opacity?:1,?displayTime?:4,?fullscreenOnly?:false,?url?:??,?linkUrl?:??,?linkWindow?:?_blank?},?plugins?:{?rtmp?:{?url?:?http:="" 7f3101ae-6f7a-11e1-a7d6-22000a1c0595="" c0ffa574B6ccbP46b688a2c9f95914115bbf="" cdnimages.sorensonmedia.com="" file-1.jpg?,?autoPlay?:?true?},{?url?:?2266d13a-62f8-11e1-9098-123139329b57?,?autoPlay?:true,?fileVersionId?:?222bb9b0-62f8-11e1-9098-123139329b57?,?captionUrl?:??},{?url?:?http:="" play?:{?replayLabel?:??,?opacity?:1},?playlist?:[{?url?:?http:="" flashvars="config={"/>

Answer 1

I think you will need to HTML Encode the string that you are looking to insert.

Have a look at the escape function