Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

DHTML YouTube movie

Posted on 2006-11-28
2
Medium Priority
?
644 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:zumpoof
  • 2
2 Comments
 
LVL 12

Accepted Solution

by:
enachemc earned 2000 total points
ID: 18026145
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
 
LVL 12

Expert Comment

by:enachemc
ID: 18026167
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question