title: jQuery changes the source code correctly, but not the rendered page result. (with jsFiddle proof)
body: <p>Here is my jQuery:</p>
  
  <pre><code>$("object").each(function(){
      video_url  = $(this).find('embed').attr('src');
      new_video_url = video_url+"&amp;autohide=1&amp;modestbranding=1&amp;showinfo=0&amp;theme=light";
      $(this).find('embed').attr('src', new_video_url);
      $(this).find('param:eq(0)').val(new_video_url);
      $(this).find('embed').before('&lt;param name="autoplay" value="1"&gt;&lt;param name="showinfo" value="1"&gt;&lt;param name="modestbranding" value="1"&gt;&lt;param name="hd" value="1"&gt;&lt;param name="color" value="white"&gt;&lt;param name="autohide" value="1"&gt;');
  });
  </code></pre>
  
  <p>Here is what the code looked like before the jQuery:</p>
  
  <pre><code>&lt;object width="500" height="371"&gt;
      &lt;param name="movie" value="http://www.youtube.com/v/ISeQBRUa8xQ&amp;amp;rel=0&amp;amp;egm=0&amp;amp;showinfo=0&amp;amp;fs=1"&gt;
      &lt;param name="wmode" value="transparent"&gt;
      &lt;param name="allowFullScreen" value="true"&gt;
      &lt;embed 
          src="http://www.youtube.com/v/ISeQBRUa8xQ&amp;amp;rel=0&amp;amp;egm=0&amp;amp;showinfo=0&amp;amp;fs=1" 
          type="application/x-shockwave-flash" 
          width="500" 
          height="371" 
          allowfullscreen="true" 
          mode="transparent"
      &gt;
  &lt;/object&gt;
  </code></pre>
  
  <p>Here is what it looks like after the jquery has been executed.</p>
  
  <pre><code>&lt;object width="500" height="371"&gt;
      &lt;param name="movie" value="http://www.youtube.com/v/ISeQBRUa8xQ&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1&amp;autohide=1&amp;modestbranding=1&amp;showinfo=0&amp;theme=light"&gt;
      &lt;param name="wmode" value="transparent"&gt;
      &lt;param name="allowFullScreen" value="true"&gt;
      &lt;param name="autoplay" value="1"&gt;
      &lt;param name="showinfo" value="1"&gt;
      &lt;param name="modestbranding" value="1"&gt;
      &lt;param name="hd" value="1"&gt;
      &lt;param name="color" value="white"&gt;
      &lt;param name="autohide" value="1"&gt;
      &lt;embed 
          src="http://www.youtube.com/v/ISeQBRUa8xQ&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1&amp;autohide=1&amp;modestbranding=1&amp;showinfo=0&amp;theme=light" 
          type="application/x-shockwave-flash" 
          width="500" 
          height="371" 
          allowfullscreen="true" 
          wmode="transparent"
          &gt;
  &lt;/object&gt;
  </code></pre>
  
  <p>Even though the HTML code has successfully changed, the rendering of the page does not show the updated code.</p>
  
  <p>Here is a jsFiddle proving the issue: <a href="http://jsfiddle.net/4kQYy/4/" rel="nofollow">http://jsfiddle.net/4kQYy/4/</a></p>
  
  <p>If you inspect the second youtube video in your inspector, you'll see that it actually gets the code injected 100% correctly, yet the page render does not reflect the update. How can that be? Surely what you see in source code is what you see on screen? Help!</p>