asked on

How can I dynamically add a YouTube movie to a page via dom on IE6+?

I'd like to have an input field where a YouTube id can be entered. This value would then be used to dynamically show the movie on the same page.
I can get it to work on FireFox, but not on IE6 and up.

I'd basically want it to work like this:

1) Enter any YouTube movie id in to form field
2) Press "Load Movie" input button
3) Corresponding YouTube movie appears on page.

Here's the static YouTube HTML for reference:

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

Thanks!

basicinstinct

it's hard...

<html>
<head>
<script type="text/javascript">
function loadIt(txt)
{
      var baseURL = "http://www.youtube.com/v/";
      var movie = txt.value;
      var useObjs = useObjects();
      if(movie.length > 0)
      {
            movie = baseURL + movie;
            var player = document.getElementById('player');
            var kids = player.childNodes;
            for(var i=0; i<kids.length; i++)
            {
                  if(kids[i].nodeType ==1)
                  {
                        player.removeChild(kids[i]);
                  }
            }
            var newPlayer = (useObjs)?buildObject(movie):buildEmbed(movie);
            player.appendChild(newPlayer);
      }
}

function useObjects()
{
      var objs = document.getElementsByTagName('object');
      if(objs.length > 0)
       return true;
      else
       return false;
}

function buildObject(movie)
{
      var obj = document.createElement('object');
      var embd = buildEmbed(movie);
      var pMovie = buildParam('movie',movie);
      var pWmode = buildParam('wmode','transparent');
      obj.appendChild(embd);
      obj.appendChild(pMovie);
      obj.appendChild(pWmode);
      obj.width = 425;
      obj.height = 350;
      return obj;
}

function buildEmbed(movie)
{
      var embd = document.createElement('embed');
      embd.src = movie;
      embd.type = "application/x-shockwave-flash";
      embd.wmode = "transparent";
      embd.width = 425;
      embd.height = 350;
      return embd;
}

function buildParam(nm, val)
{
      var obj = document.createElement('param');
      obj.name = nm;
      obj.value = val;
      return obj;
}
</script>
</head>
<body>
<form name="foo">
      <input type="text" name="mooVid"/><br/>
      <input type="button" value="Load Movie" onclick="loadIt(this.form.mooVid);"/>
</form>
<div id="player">
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/RSI5wPgCMCs"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/RSI5wPgCMCs" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
</div>
</body>
</html>

ASKER CERTIFIED SOLUTION

basicinstinct

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

zumpoof

ASKER

basicinstinct,

I can't thank you enough for this; it works perfectly.

Thanks!
Zumpoof

basicinstinct

my pleasure