Problems using .replaceWith(); with youtube iframe
<p>I made a jQuery slider that moves divs around to make the sliding effect.</p>

<p>Links are like this:</p>

<pre><code>&lt;ul id="navigation"&gt;
   &lt;li class="element"&gt;&lt;a href="#item1" class="panel , current" id="no"&gt;&lt;/a&gt;&lt;/li&gt;
   &lt;li class="element"&gt;&lt;a href="#item2" class="panel" id="no"&gt;&lt;/a&gt;&lt;/li&gt;
   &lt;li class="element"&gt;&lt;a href="#item3" class="panel" id="no"&gt;&lt;/a&gt;&lt;/li&gt;
   &lt;li class="element"&gt;&lt;a href="#item4" class="panel" id="yes"&gt;&lt;/a&gt;&lt;/li&gt;
   &lt;li class="element"&gt;&lt;a href="#item5" class="panel" id="no"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I have a YouTube iframe in the #item4 div and to stop the audio from playing when the user navigates I am using .remove();</p>

<p>eg.</p>

<pre><code>$('ul#navigation li.element a#no').click(function () {
    $('#video').remove();
});
</code></pre>

<p>This works fine on its own. The video loads and is playable then if any of the #no links are clicked the divs slide and the video stops playing.</p>

<p>I am trying to add the video back in when the #yes link is clicked using:</p>

<pre><code>$('ul#navigation li.element a#yes').click(function () {
        $('#video').replaceWith('&lt;iframe id="video" title="Showreel" width="780" height="480" src="http://www.youtube.com/embed/XR3xr8PAuJY?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;');
    });
</code></pre>

<p>Which doesn't work and stops the .remove from working as well.
I assume it is because of all the " 's that are flying everywhere within the iframe.</p>

<p>How can I get around this problem?</p>

<p>I tried using .show and .hide plus .css("display" "none") but the audio keeps playing.
Is there are a better way than .remove and .replaceWith to do this?</p>

<p>Thanks people</p>

<p><em>EDIT</em></p>

<p>I just realised I could probably do away with the .remove and just use .replaceWith to insert the iframe when the #yes link is clicked but I still have the syntax problems.</p>

<p>Could the problem be because I am trying to replace #video with an html string containing the same id?</p>

<p><em>EDIT 2</em>
I can't figure out the markdown for comments.</p>

<p>I just tried:</p>

<pre><code>$('#videobox').append('&lt;iframe id="video" title="Showreel" width="780" height="480" src="http://www.youtube.com/embed/XR3xr8PAuJY?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;');
</code></pre>

<p>where #videobox is the div that the iframe was sitting in before it was removed.
This still breaks the .remove()</p>
