Question

I’m wanting to change the source of the embedded video when the user clicks on one of the elements in my list of videos. It works fine in FF but in both IE and Chrome, nothing happens. Can anyone tell me how I can get this functionality to work properly across all browsers?
Heres my JavaScript:

function updateSource(id)
{ 
    var video = document.getElementById('video');
    video.src=document.getElementById(id).getAttribute('data-value');
}

And Here is my HTML:

<embed id="video" src="https://www.youtube-nocookie.com/v/h5NeJaWR5WA?version=3&amp;hl=en_US&amp;rel=0&showinfo=0"
            type="application/x-shockwave-flash" width="480" height="360"
            allowscriptaccess="never" allowfullscreen="true"></embed>


<li id="one" class="videoLink" style="margin-top: -1em;" onclick="updateSource(this.id)"
 data-value="https://www.youtube-nocookie.com/v/h5NeJaWR5WA?version=3&amp;hl=en_US&amp;rel=0&showinfo=0">
      <img class="youtubeThumb" src="http://img.youtube.com/vi/h5NeJaWR5WA/default.jpg" />
      <p class="videoTitle">Video Number One!</p>
</li>
<li id="two" class="videoLink" onclick="updateSource(this.id)"
 data-value="http://www.youtube-nocookie.com/v/r19okL-IW6Q?version=3&amp;hl=en_US&amp;rel=0&showinfo=0">
      <img class="youtubeThumb" src="http://img.youtube.com/vi/r19okL-IW6Q/default.jpg" />
      <p class="videoTitle">Video Number Two!</p>
</li>

Answer 1

Solution: http://jsfiddle.net/tuDXg/4/

I don’t believe the embed element supports updating the src attribute. You should wrap it in a div and change the div’s innerHTML to be a new embed element with the updated src.