DHTML YouTube movie

I'm trying to come up w/ a JavaScript version of the YouTube movie snippet.  My goal is to be able to pass a js function a YouTube id and have the appropriate movie play w/o the page refreshing. For example I'd like to be able to click on one of the links below, and have the DIV's contents load the selected movie.

<A HREF="javascript:showMovie('li5-f7GpYSU');>Show MST3K 1/10</A>
<A HREF="javascript:showMovie('oONMPeqJFYA');>Show MST3K 2/10</A>

<div id="movie_container">No movie selected</div>



for reference, here is the raw YouTube HTML:

<object width="425" height="350">
      <param name="movie" value="http://www.youtube.com/v/li5-f7GpYSU"></param>
      <param name="wmode" value="transparent"></param>
      <embed src="http://www.youtube.com/v/li5-f7GpYSU" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350">
      </embed>
</object>


Thanks!
Zumpoof
zumpoofAsked:
Who is Participating?
 
enachemcConnect With a Mentor Commented:
you can use document.getElementById("movie_container").innerHTML='<object width="425" height="350">     <param name="movie" value="http://www.youtube.com/v/li5-f7GpYSU"></param>     <param name="wmode" value="transparent"></param>     <embed src="http://www.youtube.com/v/li5-f7GpYSU" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350">     </embed></object>';
//one line above

Or you can dinamicaly create the object and assign the required properties, and then attach this new object as a child of the movie_container object.
0
 
enachemcCommented:
var obj = document.createElement("object");
obj.width=425;
obj.height=425;
var param = document.createElement("param");
param.name = "movie"
......
obj.insertBefore(param);//this will add the param element to the object element
....
document.getElementById.insertBefore(obj);


0
All Courses

From novice to tech pro — start learning today.