Dynamically Setting the Src Attribute of an Iframe while maintaining Cross-Browser Compatibility
<p>I am going to create a Iframe which must update its contents dynamically (through the src attribute -  The Iframe will change its location every time a different button is clicked) to play different youtube videos that my company has created. The problem is that I saw that you can use jquery to achieve this. I am oblivious to jquery at the moment, but will take time to learn it.   For now, I need an answer. How do I use Jquery (or any alternative browser friendly method ) to Change the src Attribute of my Iframe?</p>

<pre><code>&lt;script runat="server"&gt;

&lt;/script&gt;
&lt;div style="margin-left:auto;margin-right:auto"&gt;
    &lt;table style="width: 960px" cellpadding="0px" cellspacing="0px"&gt;
        &lt;tr&gt;
            &lt;td rowspan="6"&gt;
                &lt;iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/JZOxqVl5oP4"
                    frameborder="0" allowfullscreen id="VideoPlayer"&gt;&lt;/iframe&gt;
            &lt;/td&gt;
            &lt;td style="Width: 130px"&gt;
                &lt;img width="130px" src="./Images/Video_Logos/l_absa.gif" /&gt;
            &lt;/td&gt;
...
</code></pre>

<p>Note that there are 10 buttons. The buttons are images, and I was planning to call different "Methods" for different videos to play.</p>

<p>I know about javascript's Document.GetElementById("VideoPlayer").SetAttribute("src","NEW LOCATION") within a function, but , lets face it. IE6 + 7 sucks.</p>
